current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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..

share|improve this question
    
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 Dec 9 '13 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 Dec 9 '13 at 16:24
    
Sounds like you need to compile the HTML from JSON and append –  Maxim Shoustin Dec 9 '13 at 16:25
    
Try using <p ng-bind-html="post.content"> –  Explosion Pills Dec 9 '13 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 Dec 9 '13 at 16:36

1 Answer 1

up vote 3 down vote accepted

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

share|improve this answer
    
This is correct. For the docs on -> docs.angularjs.org/api/ng.directive:ngBindHtml –  TyMayn Dec 9 '13 at 16:37
    
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.. –  Geert Van de Langenberg Dec 10 '13 at 11:03
    
Got it working. thanks! –  Geert Van de Langenberg Dec 10 '13 at 12:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.