Print Json as an HTML String with Angular

Question

I am attempting to simply print single JSON objects as HTML strings. I am doing this in a twig template; so I have changed Angulars default output to {[{}]}. I am seeing all of the JSON when I view the app in ng-inspector, but I cannot get it to print to HTML.

I have tried testing a simple angular string output and this seems to work fine.

JSON File (separate file from script):

{
    header: {
        title: "Insights",
        slug: "insights",
        content: {
            items: "@self.children"
        }
    },
    content: "",
    children: [
        {
            header: {
                title: "item test",
                taxonomy: {
                    category: [
                        "blog"
                    ],
                    tag: [
                        "test"
                    ]
                }
            },
            content: "This is a test"
        }
    ]
}

Here is the app:

var blogJson = "http://localhost:8888/sean/insights?return-as=json";//cache json url
var blogCat = angular.module('blogCategories', []).config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});//cache app

//master controller
blogCat.controller('blogFilters', function($scope, $http) {
    $http.get(blogJson).success(function(data) {
        $scope.blogHeader = data;
    });
});

and here is the twig (html, only posting the relevant stuff, but yes the app and controller block is closed off):

<div class="blog_app_wrap" ng-app="blogCategories" ng-controller="blogFilters">
    <section class="blog_header">
        <div class="header_text_wrap">
            <div class="blog_title">
                <h1>Latest Mortgage Insight</h1>
                <div class="underline_center"></div>
            </div>
            <div class="header_text">
                <h2>{[{children[0].header.title}]}</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <a class="small_button" href="javascript:void(0)">Read Full Article</a>
            </div>
        </div>

Any help would be great; as being able to print things using Angular via JSON is going to be mission critical for this build.

JSON.stringify(<json-object>) gives a complete representation of the json object. Is that what you are looking at? — ArunGeorge
– ArunGeorge, Commented Jul 21, 2016 at 3:22
You assigned the data to the blogHeader property of $scope. So in your template, each time you want to access a value from within your data you need to start at blogHeader. For example, in your h2 you need to use blogHeader.children[0].header.title — JAAulde
– JAAulde, Commented Jul 21, 2016 at 3:24
you don't have a children object on $scope, you have a blogHeader object. try {[{blogHeader.children[0].header.title}]}; or better yet try using ng-repeat, if you have multiple items in that children array. — Claies
– Claies, Commented Jul 21, 2016 at 3:27
also, your title is misleading; you don't have HTML in your JSON — Claies
– Claies, Commented Jul 21, 2016 at 3:28
Oh my goodness! I cant believe that was all it was haha. I knew I was missing something stupid and simple. Thanks guys this was driving me up a tree! — JoethaCoder
– JoethaCoder, Commented Jul 21, 2016 at 13:40

JoethaCoder · Accepted Answer · 2016-07-21 13:42:28Z

1

Credit goes to @JAAulde and @Claies:

You assigned the data to the blogHeader property of $scope. So in your template, each time you want to access a value from within your data you need to start at blogHeader. For example, in your h2 you need to use blogHeader.children[0].header.title

answered Jul 21, 2016 at 13:42

JoethaCoder

5061 gold badge7 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Print Json as an HTML String with Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related