Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →

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.

share|improve this question
    
JSON.stringify(<json-object>) gives a complete representation of the json object. Is that what you are looking at? – ArunGeorge Jul 21 at 3:22
1  
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 Jul 21 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 Jul 21 at 3:27
1  
also, your title is misleading; you don't have HTML in your JSON – Claies Jul 21 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 Jul 21 at 13:40

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

share|improve this answer

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.