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

What are the best methods for preventing scss styles from leaking between pages?

I'm currently working on a project that includes the following files: /* styles/1.scss */ body { /* Some other styles not related to background-color */ } /* styles/2.scss */ body { background-color: blue; } // pages/one.js import "../styles/ ...

javascriptcssnext.js

Creating an Array module in Node JS

Adding a prototype to the Array class can be done in native javascript with the following code: var myArray = Array; myArray.prototype.myMethod = function(){} var testArray = new myArray(); testArray.contains(); Now I need to achieve this using a nod ...

javascriptnode.jsmodule

Leveraging IPFS to host a CSS stylesheet

I've been trying to load a css stylesheet using this link... I attempted adding the link tag to both the main and head tags. <link type="text/css" rel="stylesheet" href="https://ipfs.io/ipfs/Qmdun4VYeqRJtisjDxLoRMRj2aTY9sk ...

javascripthtmlcssipfs

Navigating with Vue Router on Internet Information Services (IIS)

I am encountering difficulties understanding why my routes are failing when I refresh my VueJS application hosted on IIS. Everything works fine during normal browsing, but once I press F5 or update view information through a button, a 403 error is thrown. ...

javascripthtmlvue.jsiis

What causes Chrome to automatically remove a script tag?

Hello everyone! Instead of utilizing jQuery, I have been creating a script tag and appending it to the head tag in order to retrieve JSONP data. However, after the JSONP callback function is executed, I have noticed that the script tag that I added to the ...

javascriptajaxgoogle-chromejsonpscript-tag

Exploring the interactions of Cordova, Ionic Framework, and AngularJS: Understanding the datafactory behavior

Exploring Cordova, Ionic Framework, and Angular has been a learning experience for me, but I've encountered a hurdle while working with a factory. Here is how my factory is set up: angular.module('test.factories', ['ionic']) ...

angularjscordovaionic-frameworkangularjs-factory

Exploring Angular.JS: How to Access Sub-Arrays and Parse Keys

Trying my hand at building something with Angular for the first time, I'm facing an issue with retrieving JSON data. The data is fetched from a SQL database in JSON format and passed to a template using Angular route: .when('/tasks/:TaskID&apos ...

javascriptjsonangularjs

The Node.js error message reads: "Cannot set headers after they have been sent" while trying to make a post request

Yes, I understand this issue has been addressed multiple times on stackoverflow, but unfortunately, I haven't found a solution that works for me. The problem arises when trying to make a post request on my nodejs server. The error message states &apo ...

javascriptnode.jsexpresspostnunjucks

Click to start viewing the video

I'm attempting to have a video play when clicked, either on the video itself or around the video. There are multiple videos on the page and I've tried various solutions including the script below which didn't work. $('video'). ...

javascriptjqueryvideo

Implementing Click-Activated Scroll-to-Div Feature in React

I need to implement a scroll-to-div feature in my React App. However, the current structure of my app is preventing me from passing refs as props correctly, making it challenging to utilize ref.current.scrollIntoView(). The layout of my code looks like th ...

javascriptreactjsreact-router

Verifying that JSON keys are in lowercase format within the .NET framework

Is there an easy way to ensure that JSON keys are sent as lowercase in .NET? Currently, I am using the Newtonsoft's Json.NET library and utilizing string loginRequest = JsonConvert.SerializeObject(auth); Here, auth is just a simple object like this ...

.netjsonjson.net

Enhancing user interfaces with jQuery by updating DOM elements

Can anyone help me figure out how to update a webpage so it functions as a report that multiple people can contribute to? I'm using forms to collect data and want it to instantly display under the correct category headings. Currently, I'm using j ...

javascriptjqueryhtml

Activate $digest when a variable is modified by a node.js function

I am currently working on developing an application using node-webkit and AngularJS. Everything was going smoothly until I tried to make Angular watch over a "legacy variable" using the method outlined in this answer, which led to an Error: [$rootScope:inp ...

javascriptnode.jsangularjsnode-webkit

Creating a default homepage across various HTML files using Google Apps Script and deploying it as a WebApp

Is there a way to set a default main page on multiple HTML and GS files in Google AppScript? I plan to publish it as a Web App. Have you attempted using the doGet function? ...

javascripthtmlcssgoogle-apps-script

In the process of transforming my JavaScript code into JQuery

I'm struggling to convert my JavaScript code into jQuery, especially when it comes to calling the function for radio elements by name. The original JavaScript works fine, but I can't seem to get the jQuery version to work correctly. Index HTML ...

javascriptjqueryhtml

Troubleshooting the non-functioning addEventListener in JavaScript

I am facing an issue where a function that should be triggered by a click event is not working and the console.log message does not appear <script src="e-com.js" async></script> This is how I included the javascript file in the head ...

javascripthtml

Looking to compare two elements within different arrays? The method outlined below is specifically designed for comparing to individual values rather than entire arrays

Is this the right approach? How can we iterate through each array to compare values? Should these data structures be modified or transformed first? Below is the data that needs to be compared. The objective is to match userID with DocumentID. const videos ...

javascriptarraysfilter

Error: Unable to locate module: Unable to resolve 'next/web-vitals'

I keep encountering the following error message: Module not found: Can't resolve 'next/web-vitals' I am interested in utilizing the **useReportWebVitals** feature from next/web-vitals. For more information, please visit: Optimizing: Analyt ...

javascriptreactjsnext.jscore-web-vitalsweb-vitals

Unable to resolve the issue of Duplicate keys detected with value '0'. This could potentially lead to errors during updates

Encountered a warning in Vue js stating 'Duplicate keys detected: '0'. This warning could potentially lead to an update error. To resolve this issue, I utilized the getter and setter in the computed variable and dispatched the value to Vuex ...

javascriptvue.jsvuexvuetify.js

Cookie Multitree: An Innovative JsTree Solution

Hello everyone, I am currently using jstree and have come across a couple of issues with having multiple trees on the same page. Here are my two problems: 1) I am looking to implement cookies to keep track of which nodes are open in each tree. I attempted ...

javascriptjqueryjstree