Why is the "&" symbol in my JSON showing as "&" when displayed in an Angular view?

In my project, I am utilizing a json file to store key/strings for localization with angular-translate. One of the strings in this file is 'Profile & Preferences', which I am using in my view. However, when I use ng-bind-html to display this string, it renders as:

Profile & Preferences

I expected ng-bind-html to automatically convert the special character & to an ampersand. How can I ensure that it displays as & instead of &? I attempted changing the string value in the json file to &, but then it appeared as:

Profile & Preferences

Here is the tag I'm currently using:

<h3 ng-bind="'REGISTRATION_3.profile-preferences' | translate"></h3>

I have also explored approaches suggested in With ng-bind-html-unsafe removed, how do I inject HTML?.

After implementing a filter recommended in the aforementioned question:

  app.filter('html', ['$sce', function ($sce) { 
    return function (text) {
        return $sce.trustAsHtml(text);
    };    
}]);

The result is:

Profile &amp;amp; Preferences

I have verified that 'ngSanitize' is being injected into my app as well.

javascriptangularjsjsonspecial-charactersangular-translate

Answer №1

I finally figured it out after realizing my mistake. I was typing too quickly and tabbed when 'ng-bind' was selected instead of 'ng-bind-html'.

The solution that worked for me was implementing a filter in app.js:

  app.filter('html', ['$sce', function ($sce) { 
    return function (text) {
        console.log('text is ');
        console.log(text);
        return $sce.trustAsHtml(text);
    };    
}]);

I then used this filter in my tag like so:

<h3 ng-bind-html="'REGISTRATION_3.profile-preferences' | translate | html"></h3>

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

JSON.stringify alters the format of a date object

I have a website where users can log in with a specific timezone, regardless of the client-side timezone. When a user selects a date on the website, it is sent to the server side using JSON.stringify along with other properties. However, when the date is r ...

javascriptjsonasp.net-mvcdatedatetime

Use the Vue `this.$router.push` method inside a setTimeout function

I have a landing page '/' that users will see first when they visit our website. I want to display a loading wheel for 5 seconds before automatically redirecting them to the login page '/login'. My Landing.vue page in Vue and Bulma.io ...

javascriptvue.jsvuejs2

Applying a CSS class to a newly generated row with JavaScript

I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...

javascripthtmlcss

The data in the Android database is failing to update

Values are retrieved from a JSON server URL using a JSON parser and stored in the local device database to display on a mobile screen. However, after updating the server and running the app again, the values are not being updated in the local database. An ...

androidjsondatabasesqliteandroid-asynctask

Angular2 Animation for basic hover effect, no need for any state change

Can anyone assist me with ng2 animate? I am looking to create a simple hover effect based on the code snippet below: @Component({ selector: 'category', template : require('./category.component.html'), styleUrls: ['./ca ...

javascriptangulartypescriptangular2-template

Avoid triggering react-query to fetch data on page load, but instead set up a manual refetching mechanism

Currently, I'm utilizing react-query v3.13 for retrieving information from an API. Instead of fetching data immediately when calling useQuery, my goal is to fetch the API periodically starting from a specific point (such as clicking a start button). ...

javascriptreactjsfetchreact-queryswr

Using node.js to parse an XML file from a URL and iterate through it to retrieve all the URLs contained within

I am currently utilizing the node module xml2js. The format of my xml file looks like this: <?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/xsl"?> <?xml-stylesheet type="text/css" media="screen" href="some url" ?> ...

javascriptxmlnode.js

What is the best method for transforming an object into an interface without prior knowledge of the keys

I am looking for a solution to convert a JSON into a TypeScript object. Here is an example of the JSON data: { "key1": { "a": "b" }, "key2": { "a": "c" } } The keys key1 and key2 a ...

jsontypescript

Transferring a JSON document to an Express server with JavaScript

I've recently started learning JavaScript and I'm facing an issue with sending a JSON file to my server (Express) so that I can parse its contents and use them in the web application I'm developing. Here's my current setup: a JSON fil ...

javascriptjsonnode.jsexpress

Having difficulty including a new key-value pair to a JSON object while using another JSON object

Looking to merge key value pairs from one JSON object into another. I've searched through various stackoverflow threads for solutions, but haven't found one that works for my specific scenario. const primaryObject = { name: "John Doe", ag ...

javascriptjson

Looking to transition from Node.js version v4.4.5 to v6.11.0 on your Windows system?

npm cache clean npm update -g I attempted upgrading using the provided commands, but unfortunately, the update did not go through as expected. Seeking advice for a successful update process. (Currently on Node.js 4.4.5 and aiming to upgrade to Node.js 6. ...

javascriptnode.jsnpm-installnode-modules

Managing a Python (JSON) key error even when the key has been confirmed to exist

I am having issues with running the code below. Even though I know that the key "vin" exists, I keep encountering a key error. How can I address this problem within the code? #page_url = 'https://www.cargurus.com/Cars/inventorylisting/viewDetailsFilte ...

pythonjsonkeykeyerror

"Utilizing jQuery to access nested JSON structures. I am looking to access nested arrays within a JSON

{ "data": [ [ { "Id": 2, "Name": "John Doe", "city": "New York", "location": "Times Square", "landmark": null, "pincode": 12345, ...

jqueryjson

Guide to emphasizing a specific term within a string by utilizing coordinates in javascript

I am facing a challenge when trying to highlight multiple words within a sentence. Specifically, I have text data that looks like this: "The furnishing of Ci Suo 's home astonished the visitors: a home of 5 earthen and wooden structures, it has a sit ...

javascripthtmlcssvue.js

Differences between importing Component and Vue from "vue-property-decorator" versus importing Vue from "vue"

Can you explain the specific differences and scenarios where importing Vue from vue-property-decorator versus just vue would be applicable? I have learned that when defining a custom component with a @Component decorator, it is necessary to import Vue fr ...

javascriptvue.jsvuejs2decoratorjavascript-decorators

In search of a solution to effectively narrow down data within an Azure API request

I'm currently facing an issue with extracting data from an azure environment. When I make an API call, I receive a JSON response containing around 60 lines of data, but I only require 4 specific lines. To optimize performance, reduce unnecessary load, ...

jsonazureapifilter

transferring JSON information to a template in a NodeJs application

Currently, I am performing some filtering on my JSON data and storing the result in a variable called driver. The driver variable contains JSON data that I want to pass unchanged to the view. My main query is: How can I effectively send the data stored i ...

javascriptnode.jsexpress

Can you tell me about some commonly used GUI widgets in Servlet-JSP?

I am new to working with Servlets, Tomcat, JSP, and I am curious about the common practices for incorporating GUI elements into JSP pages to enhance client-side interactivity. I have experience with jQuery, YUI, extJS, among others, for JavaScript scriptin ...

javajavascriptjspservlets

Observing modifications in the database is possible after executing the setInterval function

I am using a JavaScript function that runs every 4 seconds with setInterval. Once this function is executed for the first time, it calls an ajax request and changes a column value in the database. I want to know how I can check if this value has been succe ...

javascriptajaxsetinterval

The function User.find does not exist and it is not possible to replace the `users` model after it has

Currently, I am experimenting with using mongoose, mongoDB, next, and express in a test project. Despite referencing solutions like Cannot overwrite model once compiled Mongoose and others, I am encountering issues unique to my situation. Upon initializat ...

javascriptexpressmongoosenext.jsmodel