I'm curious about integrating Bengali language into an AngularJS script – any tips?

My app built with Angular is having trouble loading and displaying JSON data in Bengali language. I've made sure the server response is in UTF-8, but I still encounter the error "SyntaxError: Unexpected token in JSON at position 38" specifically when the variable values are in Bengali.

Interestingly, when I use plain JavaScript without any libraries or frameworks, I am able to parse the JSON object without any issues.

app.js

var App = angular.module('myApp', []);

App.controller('myCtrl', function($scope, $http) {
    $scope.setLang = function(language) {
        document.getElementById("rootElement").lang = language;

        $http.get('_customizable/languages/' + language + '.js', {header: {"Content-Type":"application/json; charset:utf-8"}})
           .then(function(res){
              $scope.translated = res.data;                
            }
        );
    }
    $scope.setLang(document.getElementById("rootElement").lang);
});

bn.js

{
   "Applications":"অ্যাপ্লিকেশন",
   "AccountSettings": "অ্যাকাউন্ট সেটিংস",
   "AuthorizationManager": "অনুমোদন ম্যানেজার ",
   "DCCMaintenance": "ডিসিসি রক্ষণাবেক্ষণ",
   "MastercardClearing": "মাস্টারকার্ড ক্লিয়ারিং",
   "ParticipantManager": "অংশগ্রহণকারীর ম্যানেজার",
   "PropertiesManager": "বৈশিষ্ট্যাবলী ম্যানেজার",
   "VisaClearing": "ভিসা ক্লিয়ারিং",
   "WorkflowManager": "কর্মপ্রবাহ ম্যানেজার",
   "Users": "ব্যবহারকারী",
   "Groups": "দল",
   "RecordsSearch": "রেকর্ডস অনুসন্ধান",
   "UserName": "ব্যবহারকারীর নাম",
   "Search": "খোঁজো",
   "Reset": "রিসেট",
   "UserRecords": "ব্যবহারকারীর রেকর্ডস",
   "Delete": "মুছে ফেলুন",
   "AllRightsReserved": "সমস্ত অধিকার সংরক্ষিত."
}

It's worth noting that this JSON file triggers errors on various online JSON editors such as

javascriptangularjsjsonangularjs-directive

Answer №1

After obtaining the original file instead of relying on the one copied here, we were able to identify the issue.

The first indication that something was amiss was when pasting the posted version into a json validation site yielded successful results.

Upon comparing the original file with the one shared here using a hex editor, we discovered the discrepancy. The original English file, when translated to Bengali using Google Translate, altered the 3 leading spaces from 0x20 0x20 0x20 to 0xC2 0xA0 0xC2 0xA0 0x20.

Therefore, the lesson learned is to only translate the specific parts of a file that require translation, rather than translating the entire document.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Variations in JSON serialization with loadAll() compared to loadById(Long id)

I have developed a Folder class in Java Spring Boot, which represents the structure of multiple levels of folders for managing bookmarks: @Entity @Setter @Getter @NoArgsConstructor @AllArgsConstructor **public class Folder** implements Serializable { ...

javajsonspring-bootserializationspring-restcontroller

What is the best way to toggle between rendering two components or updating two outlets based on a route in React Router?

There is a React application I am working on that utilizes React-Router. My layout component has the following structure: import React from 'react'; import Header from './components/Header/Header'; import Footer from './components/ ...

javascriptreactjsreact-routerreact-router-dom

Issues arise when using res.send() with ExpressJS and Mongoose

Initially, I have multiple callbacks that need to be executed before sending a res.send() to construct a JSON API: app.get('/api', function (req, res){ ... function logPagesId() { console.log("load: " +pagesId); c ...

javascriptnode.jsmongodbexpress

Implementing conditional color parameter using Vuetify on an element

In my Vuetify project, I'm utilizing the built-in color parameter and predefined colors. My goal is to dynamically change the component's color based on the data it receives. For example, if complete: true, then the color should be green. Here&a ...

javascriptvue.jsvuetify.js

What is the best way to use form input to filter an Observable?

Within my component, I have declared the variable "countries$": countries$!: Observable<Country[]>; To populate this variable with data from this API, I use the following code in the "ngOnInit" lifecycle hook: ngOnInit(){ this.countries$ ...

javascriptangulartypescriptrxjsobservable

npm command syntax to accept multiple arguments

Struggling to pass arguments in an npm command and utilize them in my script For instance: npm run test -b chrome -e QA "scripts": { "test": "something.js ./xyz/abc/cdf --something \"{\\\"browser\\\": \&bsol ...

javascriptnode.jsnpm

When the client initiates, Meteor gets a head start

Can you explain why, on the client side, the variable init in if(init) is evaluated to be true even before init = true is called and when no new documents are added to the Orders collection? As a result, the query.observe function returns all documents ret ...

javascriptnode.jsmeteornpm

Steps for inserting a menu item into a Material UI Card

Below is an example I'm working with: https://codesandbox.io/s/material-ui-card-styling-example-lcup6?fontsize=14 I am trying to add additional menu options such as Edit and Delete to the three dots menu link, but so far I have not been successful. ...

javascriptreactjsangularmaterial-uicard

Dividing a string using jQuery

What is the best way to extract numbers from strings using jQuery? Mode1 2Level In jQuery, how can I retrieve only the numerical values from the strings shown above? The strings could be variations like Mode11, Mode111, 22Level, 222Level, where the char ...

javascriptjquerystringsplit

What is the process for transforming a JsonObject into an Avro Generic Record?

I am new to this field and I am currently working on deserializing data from a parquet file using Apache Beam's ParDo and DoFn, making changes to the record, and then updating the GenericRecord. Initially, I tried iterating through a GenericArray typ ...

javajsonkotlinapache-beamavro

Deactivate the button in the final <td> of a table generated using a loop

I have three different components [Button, AppTable, Contact]. The button component is called with a v-for loop to iterate through other items. I am trying to disable the button within the last item when there is only one generated. Below is the code for ...

javascripthtmltypescriptvue.js

Utilize NodeJS API to convert a base64 data string into a downloadable PDF file

My NodeJS API is set up to communicate with another API and fetch a data object in the form of a Base64 string. The client making the API call needs to be able to download a PDF file generated from this base64 data. What is the best way to return the dat ...

javascriptnode.jspdfbase64

Node.js C++ addons provide accessors for interacting with Node.js from native

How can I implement setter and getter for a global variable 'X' in a C++ extension for Node.js? I am encountering issues with undefined 'x' while using the getter and setter methods. Currently working on a program involving Accessors ...

javascriptc++node.js

React frontend communicating without backend server

Is it possible to send a message between two frontend users on web applications built with React? ...

javascripthtmlreactjs

When attempting to sort an array in C#, it may lead to triggering an InvalidOperationException

My challenge is to sort a JsonArray of JsonObjects by a specific property, but I keep encountering an error: System.InvalidOperationException: failed to compare two elements in the array. Inner Exception: ArgumentException: at least one object must imp ...

c#arraysjsonsorting.net-6.0

The concealment of the container is ineffective when attempting to hide it until all cached images are

My website has a background and a main container. I wanted to hide the container until the entire page had loaded, so I included #cover{opacity:0} at the beginning of the page and $(window).load(function() { $('#cover').css('opacity&apo ...

javascriptjqueryhtmlcss

What is the best way to incorporate a generated ID into the datepicker() function whenever a button is clicked?

I'm looking to dynamically generate a row of input fields with unique IDs every time the "add another flight" button is clicked, similar to the functionality seen on destina.us. Additionally, I need to incorporate these generated IDs into the jQuery U ...

javascriptjqueryjquery-uidatepicker

"Exploring the Power of VueJS Classes and Conditions

Is it possible to add a Class based on a Child's Class Condition in the menu? For example: <ul :class="{ 'open' : ThereIsClassInChild }"> <li v-for="item in list" :class="{ 'active' : $route.name == item.routeName }" ...

javascriptvue.jsvuejs2

Inquiring about how to retrieve a complete list of elements from a Rest Api and convert it from a json string to a list of java objects

I am currently attempting to make a Get request using RestTemplate in order to fetch a list of all objects from a basic Rest Api. This particular page outlines two methods to accomplish this (section 3.1 and 3.2) at this link. I have tested both options, ...

jsonspringresthttprequest

Using the escape character to handle square brackets within a PHP Swagger annotation JSON property

In my Php Laravel API development I utilize swagger (2.0) annotations with the help of darkaonline/l5-swagger library which leverages swagger-php to generate swagger.json. However, a particular issue has arisen where when I input the following code snippet ...

phpjsonannotationsswagger-2.0swagger-php