CODEWITHSUNDEEP
javascriptangularjsjsonjavascript-objectsgrav
JoethaCoder
JoethaCoder

Reputation: 506

Print Json as an HTML String with Angular

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.

Upvotes: 0

Views: 1319

Answers (1)

JoethaCoder
JoethaCoder

Reputation: 506

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

Upvotes: 1

Related Questions