Injecting json using angular with working html tags

Question

I need your help! I'm trying to import json file using angular. The only problem is that the json file is imported from other website and the html tags display as normal text. And here is my question, is there any chance to make those tags normal html not a visible text?

HTML:

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="maincontroller.js" type="text/javascript"></script>
    </head>
    <body bgcolor="lightblue">
        <div ng-app="mainApp" ng-controller="mainController">
            <div id="content" style="width: 500px; height: 500px; background-color: green; ">
                <div ng-repeat="content in contents">
                    <h2>{{content.title}}</h2>
                    <p>{{content.date}}</p>
                    <p>{{content.info}}</p>
                    <p>{{content.content}}</p>
                    <p>{{content.url}}</p>
                </div>
            </div>
        </div>
    </body>
</html>

maincontroller.js

var myapp=angular.module('mainApp',['ngSanitize']);
myapp.controller('mainController',function($scope,$http){
    $http.get('/WP/?json=get_recent_posts').then(function(response, date){
        $scope.contents = response.data.posts;
        alert("success");
        console.log(response)
    }, function(error){
        $scope.contents = [{title:"<h4> Error </h4>",date:"<p> JSON invalid </p>"}]; 
        alert("error");
        console.log(response)
    })
});

not able to understand from your description, what exactly do you want. Some example would be good. — Sachin Gupta
– Sachin Gupta, Commented Jan 12, 2017 at 9:36

prakash tank · Accepted Answer · 2017-01-12 10:57:09Z

Try this solution :

Your maincontroller.js file

I have added $sce.trustAsHtmlso html file can know that content has html tags

 var myapp=angular.module('mainApp',['ngSanitize']);
    myapp.controller('mainController',function($scope,$http, $sce){
        $http.get('http://localhost/wordpress/?json=get_recent_posts').then(function(response, date){
            $scope.contents = response.data.posts;
            $scope.info = $sce.trustAsHtml(contents.info);
            alert("success");
            console.log(response);
        }, function(error){
            $scope.contents = [{title:"<h4> Error </h4>",date:"<p> JSON invalid </p>"}]; 
            alert("error");
            console.log(response);
        })
    });

And your index.html

add angular-sanitize.js file if you have not added yet. and use ng-bind-html in your html tag.

<!doctype html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.1/angular-sanitize.js"></script>
    <script src="mainController.js" type="text/javascript"></script>
    </head>
    <body bgcolor="lightblue">
        <div ng-app="mainApp" ng-controller="mainController">
            <div id="content" style="width: 500px; height: 500px; background-color: green; ">
                <div ng-repeat="content in contents">
                    <h2 ng-bind-html="content.title">{{content.title}}</h2>
                    <p>{{content.date}}</p>
                    <p>{{content.info}}</p>
                    <p ng-bind-html="content.content">{{content.content}}</p>
                    <p>{{content.url}}</p>
                </div>
            </div>
        </div>
    </body>
</html>

ricky · Accepted Answer · 2017-01-12 09:38:59Z

1

Instead of using binding express {{}} use ng-bind-html-unsafe It will render html tag as well

example

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.text = "<strong>this is html</strong>";
});

<body ng-controller="MainCtrl">
  Hello {{name}}!
  <br/>
  <ul>
    <li>{{text}}</li>
    <li ng-bind-html-unsafe="text"></li>
  </ul>
</body>

Out will be like

Hello World! 
<strong>this is html</strong>
this is html

answered Jan 12, 2017 at 9:38

ricky

1,6841 gold badge13 silver badges25 bronze badges

1 Comment

Lapsio Over a year ago

Thanks for help! :)

Francesca · Accepted Answer · 2017-01-12 09:39:00Z

1

If I have understood well, you have to use something like this in your javascript:

myapp.controller('mainController',function($scope,$http, $sce){
    $http.get('/WP/?json=get_recent_posts').then(function(response, date){
         $scope.contents = response.data.posts;
         $scope.title = $sce.trustAsHtml(contents.title);
         alert("success");
         console.log(response)
    }, function(error){
         $scope.title = $sce.trustAsHtml("<h4> Error </h4>");
         $scope.date = $sce.trustAsHtml("<p> JSON invalid      </p>");
         alert("error");
        console.log(response)
    })
});

and this in your html:

<p ng-bind-html="title" class="htmlComment">

answered Jan 12, 2017 at 9:39

Francesca

2482 silver badges11 bronze badges

Comments

digit · Accepted Answer · 2017-01-12 09:39:41Z

1

You can use ngBindHtml. Edit your code like below

<span ng-bind-html="content.title">{{content.title}}</span>

answered Jan 12, 2017 at 9:39

digit

4,5653 gold badges30 silver badges46 bronze badges

1 Comment

Lapsio Over a year ago

tired it before, but still got some bugs, but thanks for help anyway :))

Sharmila · Accepted Answer · 2017-01-12 09:53:16Z

1

Try this

https://plnkr.co/edit/JcW2fxcISsjYKpXGBBkp?p=preview

Inject ngSanitize before using ngBindHtml

var app = angular.module('plunker', ['ngSanitize']);....

<div ng-bind-html="scopeVariable"></div>

answered Jan 12, 2017 at 9:53

Sharmila

7954 silver badges11 bronze badges

1 Comment

Sharmila Over a year ago

Welcome Lapiso :)

Collectives™ on Stack Overflow

Injecting json using angular with working html tags

5 Answers 5

Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related