Angular Js how to read the JSON data which has html elements in it

Question

We are facing an issue with reading json file data which has html content in it. Please find below code with json data we are using.

Json data:

{
    "aboutContent": {
        "listItems": [{
            "title": "Investors",
            "description": "Investors Together, we are transforming health care with trusted and caring solutions. Learn more about upcoming events,",
            "image": "image/ABCBS_handshake.jpg",
            "something": "sadfsd"
        }, {
            "title": "Careers",
            "description": "Discover your opportunity with us now. Learn more about careers at Anthem, Inc.",
            "image": "image/ABCBS_AboutUs_Careers.jpg"
        }, {
            "title": "Locations",
            "description": "Need to contact us? See where we are located near you. Learn more about our locations.",
            "image": "image/ABC_AboutUs_Locations.jpg"
        }, {
            "title": "Foundation Guidelines",
            "description": "See how Anthem Blue Cross Blue Shield gets involved. Learn more about our Foundation Guidelines and Community Involvement.",
            "image": "image/ABCBS_AboutUs_Charity.jpg"
        }, {
            "title": "Press Room",
            "description": "<div><span style=\"color: rgb(105, 105, 105); font-family: Arial; font-size: 12px; line-height: 16px;\">Investors Together, we are transforming health care with trusted and caring solutions.</span><a href=\"http://ir.antheminc.com/phoenix.zhtml?c=130104&amp;p=irol-irHome\" style=\"color: rgb(0, 138, 183); text-decoration: none; font-family: Arial; font-size: 12px; line-height: 16px;\" target=\"_blank\">Learn more about upcoming events, financials and how to contact us </a>
    </div>",
            "image": "image/ABCBS_AboutUs_Press.jpg"
        }]
    }
}

Service

angular.module("newsStore.moduleServices", [])
        .factory('aboutService', ['$http', '$q', aboutService]);

function aboutService($http, $q) {
    return {
        getAboutContent: function() {
            var deferred = $q.defer(),
                fetchContent = $http.get('json/about.json');
            fetchContent.success(function(news) {
                console.log(news);
                deferred.resolve(JSON.parse(news));
            }).error(function(error) {
                console.log('error', error);
                deferred.reject(error);
            });

            return deferred.promise;                
        }
    }
}

Directive:

angular.module("newsStore.moduleDirectives", [])
        .directive('renderAboutContent', ['aboutService', renderAboutContent])

function renderAboutContent(aboutService) {
    return {
        restrict: 'AE',
        scope: {},
        templateUrl: 'templates/about.html',
        link: function(scope, element) {
            aboutService.getAboutContent()
                .then(function(results) {
                    scope.aboutList = results.aboutContent.listItems;                       
                }, function(error) {
                    console.log('controller error', error);
                });
            scope.colWidth = function(content) {
                return content.image && content.something ? 'col-xs-4' : 'col-xs-6';
            }
        }
    }
}

HTML content:

<div class="col-md-12 aboutUs-ph padT10 content-ph_abt" ng-repeat="content in aboutList">
    <div class="form-group" ng-if="content.image" >
        <img src="{{content.image}}" class="img-responsive" />
    </div>
    <div class="middle" >
        <span class="guidedTourText">
            <b>{{content.title}}</b></span>
            <br>
        <span>{{content.description | to_trusted}} </span>
    </div>

    <div class="last" ng-if="content.something">
        {{content.something}}
    </div>
</div>

Right now in the above json file we can read the starting three items but we can't read the last one as it has the html elements in the description one. I have also used ngsanitize but that didn't help so can you guys let me know how to get this one fixed. I am getting this error when I run the page

SyntaxError: Unexpected token o at Object.parse (native) at http://localhost:8997/script/services.js:30:28 at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:80:385 at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:112:20 at l.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:125:305) at l.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:398) at l.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:58) at l (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:81:171) at S (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:85:301) at XMLHttpRequest.D.onload (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:86:315)

I know this error is from json itself, if I remove the html elements everything works fine.

Let me know if I am not clear with the question, thanks in advance.

SyntaxError: Unexpected token o means the response returned from server is not valid JSON. Check the validity of JSON in JSONLint. Encode the HTML when sending response — Tushar
@Tushar Buddy I have placed my json in JSONlin, it gives this error ... "description": "'<div><span style=' -----------------------^ Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[' how should I start my html in it. — Angular Learner

Arty9000 Arty9000 · Accepted Answer · 2015-11-16T08:52:16

Seems like Json is invalid because you contained html code with quotation-marks "" inside. Check it here Try to replace it with single quots ''. It should help you to avoid this error.

Still if you have problem to show html then use

<div ng-bind-html-unsafe="expression"></div>

Angular Js how to read the JSON data which has html elements in it

1 Answers