AngularJS, special character from Json via server

Question

I'm trying to create a small multi-language project using NodeJS version 10.15.1, AngularJS version 1.5.8 and UTF8 encoded html. I should proceed with my own function instead of using other modules.
I created 2 different json files containing 2 different languages. The json is loaded via server using a $http call and the answer is stored inside a $scope variable.

$http.post(apihost + '/languages/language_frontend', {page: "home"}).then(function(language) {
   $scope.language = language.json;
});

I pass the parameter page to filter with part of the json the function should retrieve.

router.post('/language_frontend', function(req, res, next) {
   return new Promise(function(resolve,reject) {
      if(config.language == 'it') return res.json({status: 'ok', json: italian_frontend[req.body.page]});
      else if(config.language == 'en') return res.json({status: 'ok', json: english_frontend[req.body.page]});
   });
});

This is (part) of one of the json

{
   "home": {
      "planning": "Pianificazione",
      "activities_planning": "Pianificazione Attività"
   },
   "login": {
      "test_one": "italiano uno",
      "test_one": "italiano due"
   }
}

And this is the html that displays the information

<div class="panel-heading">
   <div class="row">
      <div class="col-xs-3"><i class="fa fa-mobile-phone fa-5x"></i></div>
      <div class="col-xs-9 text-right">
         <div class="huge ng-binding">{{language.activities_planning}}</div>
      </div>
   </div>
</div>

The problem is that the displaying of activities_planning comes with an accented character and, coming from server side call, I don't know how to display it correctly. I'd like a general solution to implement everywhere, so I don't have to worry about few exceptions with special characters.

This is the result without a solution: Pianificazione Attivit�

Any suggestion?

I tried to reproduce the same code but I don't have any problem with the specials characters. Maybe the problem is somewhere else in your code. I can upload my working version if you want. — Đăng Khoa Đinh
– Đăng Khoa Đinh, Commented May 4, 2021 at 18:38
@ĐăngKhoaĐinh yes please...i still couldn't figure it out, any help would be appreciated, thank you! — alesssz
– alesssz, Commented May 5, 2021 at 8:29

Đăng Khoa Đinh · Accepted Answer · 2021-05-06 05:38:38Z

So, here it is https://glitch.com/edit/#!/angularjs-specialchars. I tried to set up the same thing with you :

In my app.js on the backend, I get the content of JSON file and expose it in /language route :

const path = require("path");
const express = require("express");
const app = express();
const language = require("./test.json");

app.use('/', express.static(path.join(__dirname, 'public')));
app.get('/language', (req, res) => res.json({ status: "ok", json: language }));

app.listen(5000, function() {console.log("Server is running on port 5000")});

In my index.js on the client-side, I send a request to the server to get the JSON file :

angular.module("app", []).controller("MyController", ["$scope", "$http",
    function ($scope, $http) {

        // send request to get the json 
        $http.get('/language').then(function (resp) {
            const language = resp.data.json;
            console.log(language); // I've checked on the console.log, the text is OK
            $scope.text = language.test; // bind to screen
        });

    }
]);

And in my index.html I just use it :

<body ng-app="app">
    <div ng-controller="MyController">
        <h1>Hello {{text}}!</h1>
    </div>
</body>

What I have :

Collectives™ on Stack Overflow

AngularJS, special character from Json via server

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related