Angular.js How to render a HTML tag from json file

Question

I am trying to parse html value in my angular page, not sure what I am doing wrong, I am getting this error in my console:

app.js:13 Uncaught SyntaxError: Unexpected token )

app.js

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

App.controller('ProjectCtrl', function($scope, $http) {
  $http.get('app/test.json')
       .then(function(res){
          $scope.projects = res.data;
        });

       App.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
});

test.json

[
  { "icon": "<i class="fa fa-github fa-3x" aria-hidden="true"></i>", "name": "lovelycss" },
  { "icon": "<i class="fa fa-github fa-3x" aria-hidden="true"></i>", "name": "lovely-icons" }
]

html:

<div ng-controller="ProjectCtrl">
  <ul>
    <li ng-repeat="project in projects">
     <div ng-bind-html="'{{project.icon}}' | to_trusted"></div>- <em>{{project.name}}</em>
    </li>
  </ul>
</div>

what I am trying to archive is this: http://jsfiddle.net/JfGVE/1547/

I want a json loading the icons and the text.

I hope now this will be clear.

Try my this answer stackoverflow.com/a/39384192/6608101

Mohit Tanwani
– Mohit Tanwani

2016-09-09 10:21:46 +00:00
Commented Sep 9, 2016 at 10:21 — Mohit Tanwani
– Mohit Tanwani, Commented Sep 9, 2016 at 10:21
which line is 13 ?

cjmling
– cjmling

2016-09-09 10:24:00 +00:00
Commented Sep 9, 2016 at 10:24 — cjmling
– cjmling, Commented Sep 9, 2016 at 10:24

Alvaro Vazquez · Accepted Answer · 2016-09-09 10:53:40Z

4

You are missing a } in your controller declaration and a [ in your filter declaration:

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

App.controller('ProjectCtrl', function($scope, $http) {
    $http.get('app/test.json')
         .then(function(res){
            $scope.projects = res.data;
          });
}); // You are missing a '}' here

App.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]); // You are missing a ']' here

You will also have to edit your JSON to escape your quotes "

[
    {
        "icon": "<i class=\"fa fa-github fa-3x\" aria-hidden=\"true\"></i>",
        "name": "lovelycss"
    }, {
        "icon": "<i class=\"fa fa-github fa-3x\" aria-hidden=\"true\"></i>",
        "name": "lovely-icons"
    }
]

And the expression you are passing to ng-bind-html is also wrong. Because of the single quotes ' you are passing a literal string '{{project.icon}}' to the filter. You have to remove the quotes and the curly braces, because the ng-bind-html directive needs an expression as a parameter.

<div ng-controller="ProjectCtrl">
  <ul>
    <li ng-repeat="project in projects">
     <div ng-bind-html="project.icon | to_trusted"></div>- <em>{{project.name}}</em>
    </li>
  </ul>
</div>

edited Sep 9, 2016 at 10:53

answered Sep 9, 2016 at 10:24

Alvaro Vazquez

3723 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

raduken Over a year ago

thanks, but i am getting this error now: SyntaxError: Unexpected token f in JSON at position 25 at xc (angular.js:1326) at dc (angular.js:10515) at angular.js:10606 at r (angular.js:321) at hd (angular.js:10605) at c (angular.js:11403) at angular.js:16170 at m.$eval (angular.js:17444) at m.$digest (angular.js:17257) at m.scopePrototype.$digest (hint.js:1364)

Alvaro Vazquez Over a year ago

@Raduken That's because you have to scape the quotes (") with a backslash this way: \" I will edit my answer to add that.

raduken Over a year ago

thanks but in my html is loading this: {{project.icon}} , to be fair I want a Icon there rendered, understand? I don't want show the <i> tag but the icon, understand?

Alvaro Vazquez Over a year ago

@Raduken I understand. Please, edit your question providing all the information, with all the steps you have gone through. I will edit my answer to provide a solution for that problem as well.

Alvaro Vazquez Over a year ago

@Raduken Answer editted. I hope this is the final solution :)

cjmling · Accepted Answer · 2016-09-09 10:38:31Z

3

The message tells you the problem: you have a syntax error. Two actually.

the function for your controller is not closed.
there is not closing bracket for the filter.

app.js

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

App.controller('ProjectCtrl', function($scope, $http) {
  $http.get('app/test.json')
       .then(function(res){
          $scope.projects = res.data;
        });
}); // 1

App.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]); // 2

For JSON ERROR fix using this

[
  { "icon": "<i class='fa fa-github fa-3x' aria-hidden='true'></i>", "name": "lovelycss" },
  { "icon": "<i class='fa fa-github fa-3x' aria-hidden='true'></i>", "name": "lovely-icons" }
]

edited Sep 9, 2016 at 10:38

cjmling

7,29911 gold badges50 silver badges83 bronze badges

answered Sep 9, 2016 at 10:22

kjaquier

8544 silver badges11 bronze badges

3 Comments

raduken Over a year ago

thanks but I am getting this error now: SyntaxError: Unexpected token f in JSON at position 25 at xc (angular.js:1326) at dc (angular.js:10515) at angular.js:10606 at r (angular.js:321) at hd (angular.js:10605) at c (angular.js:11403) at angular.js:16170 at m.$eval (angular.js:17444) at m.$digest (angular.js:17257) at m.scopePrototype.$digest (hint.js:1364)

kjaquier Over a year ago

You have used double quotes inside the string content in the json (which is not allowed since we're already using double quotes for strings) ; see the edit

raduken Over a year ago

thanks but in my html is loading this: {{project.icon}} , to be fair I want a Icon there rendered, understand? I don't want show the <i> tag but the icon, understand?

Collectives™ on Stack Overflow

Angular.js How to render a HTML tag from json file

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related