Filter HTML out of JSON object with AngularJS

Question

I'm currectly working on a Wordpress project. But for a nice change I'm working with a JSON API, which only gives me the information I need.

I'm only facing one problem at the moment. The content part in my JSON contains HTML tags, which get printed on the screen, without actually using the HTML tags.

The JSON output looks like this:

 [{
"ID": 11,
"title": "test",
"status": "publish",
"type": "page",
"author": {
    "ID": 1,
    "name": "admin",
    "slug": "admin",
    "URL": "",
    "avatar": "http:\/\/0.gravatar.com\/avatar\/401f2b3c91dee8969b193544c3d9a636&d=404&r=G",
    "meta": {
        "links": {
            "self": "http:\/\/geertvandelangenberg.nl\/wp\/wp-json.php\/users\/1",
            "archives": "http:\/\/geertvandelangenberg.nl\/wp\/wp-json.php\/users\/1\/posts"
        }
    }
},
"content": "<p>testtt<\/p>\n", 
}]

My HTML looks like this:

<script src="http://geertvandelangenberg.nl/wp/wp-content/themes/twentythirteen/js/angular.min.js"></script>
<script>
    function PostsCtrlAjax($scope, $http) {
        $http({method: 'GET', url: 'http://geertvandelangenberg.nl/wp/wp-json.php/pages/'}).success(function(data) {
            $scope.posts = data; // response data 
        });
    }
</script>

    <div id="ng-app" ng-ap- ng-controller="PostsCtrlAjax">
        <div ng-repeat="post in posts">
            <h2>
                <a href='{{post.link}}'>{{post.title}}</a>
            </h2>
            <div class="time">
                {{post.date}} - {{post.author.name}}
            </div>
            <p>{{post.content}}</p>
        </div>
    </div>

Could anyone tell me how I can filter out the HTML tags in the JSON object?

Thanks in advance!

Geert

EDIT

Thanks for you comments so far, could anyone please edit this jsbin, I can't seem to manage to get this to work, even with the AngularJS docs. I'm still quite noobish with Angular, but if someone would help me, it'd be much appreciated :)

jsbin.com/oRoqIJEC/1/edit

PS. output does not work on jsbin because of stupid Access-Control-Allow-Origin issues..

Do you want to escape the tags so it will literally display <p>testtt</p> or remove the tags themselves -- or remove the tags and their contents? — Explosion Pills
– Explosion Pills, Commented Dec 9, 2013 at 16:22
Well, the tags could be usefull if they were actually doing something! Only now the tags are just printed on the screen. — Geert Van de Langenberg
– Geert Van de Langenberg, Commented Dec 9, 2013 at 16:24
Sounds like you need to compile the HTML from JSON and append — Maxim Shoustin
– Maxim Shoustin, Commented Dec 9, 2013 at 16:25
If using ng-bing-html, you will need to add ngSanatize to your app. docs.angularjs.org/api/ng.directive:ngBindHtml — TyMayn
– TyMayn, Commented Dec 9, 2013 at 16:36

Nat Wallbank · Accepted Answer · 2013-12-09 16:33:43Z

3

ng-bind-html will render your HTML. Don't forget to inject ngSanitize into your controller though.

answered Dec 9, 2013 at 16:33

Nat Wallbank

1,45713 silver badges12 bronze badges

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

2 Comments

TyMayn Over a year ago

This is correct. For the docs on -> docs.angularjs.org/api/ng.directive:ngBindHtml

Geert Van de Langenberg Over a year ago

Thanks for you comments so far, could anyone please edit this jsbin, O can't seem to manage to get this to work, even with the AngularJS docs. I'm still quite noobish with Angular, but if someone would help me, it'd be much appreciated :) jsbin.com/oRoqIJEC/1/edit PS. output does not work on jsbin because of stupid Access-Control-Allow-Origin issues..

Collectives™ on Stack Overflow

Filter HTML out of JSON object with 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