Decode JSON HTML data to display in AngularJs

Question

I have JSON data in which there are some HTML tags as well. When I'm trying to show that data in a browser it also prints the HTML tags as it is without converting them to what they are supposed to show. See my code below.

My JSON data (ibmndata.php I'm converting PHP data to JSON):

[
   {
    "title": "<span class='data'>Lectures</span>",
    "content" : "lectures.jpg"
      },
      {
    "title": "<span class='data'>Case Study Analysis</span>",
    "content" : "case-study.jpg"
      },
      {
    "title": "<span class='data'>Industry Analysis Projects</span>",
    "content" : "industry-a.jpg"
      },{
    "title": "<span class='data'>Summer Internship Projects</span>",
    "content" : "summer-internship.jpg"
      }
]

My Angular data

Model (here I have included 'ngSanitize' package as I found in some other example)

var app = angular.module('ibmnApp', ['ngAnimate', 'ngRoute', 'ngSanitize', 'ui.bootstrap']);

Controller

app.controller('ibmnController', ['$scope', '$http', function($scope, $http)
{
    $http.get('ibmndata.php').success(function(data)
    {
        $scope.ibmnlist = data;
    });
}]);

HTML part

<div class="col-md-9" ng-controller="ibmnController">
   <div class="col-md-9" ng-repeat="item in ibmnlist">
      <p>{{item.title}}</p>
      <p ng-bind-html="item">{{item.content}}</p>
   </div>
</div>

I found a similar problem on web but its solution is not working for me. Please tell me what could be the problem in my code or suggest me a way to do this in AngularJs. Thanks.

Because {{}} is only for text

charlietfl
– charlietfl

2016-06-30 11:39:36 +00:00
Commented Jun 30, 2016 at 11:39 — charlietfl
– charlietfl, Commented Jun 30, 2016 at 11:39

AlainIb · Accepted Answer · 2016-06-30 11:16:21Z

2

this is a working plunker :http://plnkr.co/edit/fZ5LnxMv5Ngnzyv6fsz2?p=preview

you have to add the "unsafe" filter :

angular.module('myApp').filter('unsafe', function ($sce) {
   return function (val) {
      if( (typeof val == 'string' || val instanceof String) ) {
         return $sce.trustAsHtml(val);
      }
   };
});

and in the view :

<div ng-controller="ibmnController">
   <div ng-repeat="item in ibmnlist">

      <p ng-bind-html="item.title | unsafe "></p>
      <p>{{item.content}}</p>
   </div>
</div>

BONUS : you are using success for $http who is depreceated, use then instead :

offical documentation :

// Simple GET request example:

$http({

 method: 'GET',

 url: '/someUrl'

 }).then(function successCallback(response) {

  // this callback will be called asynchronously

  // when the response is available

 }, function errorCallback(response) {

  // called asynchronously if an error occurs

  // or server returns response with an error status.

 });

edited Jun 30, 2016 at 11:16

answered Jun 30, 2016 at 11:08

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

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

2 Comments

user3224207 Over a year ago

They are actually title and content. I have corrected that. I'll try your solution.

user3224207 Over a year ago

Thanks for the solution.

Collectives™ on Stack Overflow

Decode JSON HTML data to display in AngularJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related