0

I am using Grav CMS and I am trying to build my blog list page via Angular/Json (I am parsing all page data via Json) I have managed to get all of the data to show up in NGInspector, but no matter what I try it will not write to the page.

Also, I really hate using the repeat. method as it seems incorrect for this specific situation (though I will need it later)

Here is my HTML (actually a TWIG template, and there is still static content):

{% embed 'partials/base.html.twig' %}

{% set collection = page.collection() %}

{% block content %}
<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 ng-repeat="items in blogHeader">{{items.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>
            <div class="overlay_lite"></div>
        </section>
        <div class="category_bar_contain">
            <!--ToDo: Add horizontal, scrollable category section here-->
            <div class="category_wrap">
                <ul>
                    <li class="active" id="cat_all">All Posts</li>
                    <li id="cat_name2">Topic 1</li>
                    <li id="cat_name3">Topic 2</li>
                    <li id="cat_name4">Topic 3</li>
                    <li id="cat_name5">Topic 4</li>
                    <li id="cat_name6">Topic 5</li>
                </ul>
            </div>
        </div>
        <div class="filter_contain">
            <input type="text" placeholder="Search Articles" />
        </div>
        <section class="blog_grid_contain">
            <!--ToDo: Add a 3X blog post card grid based on exsisting bourbon columns that is the containers for the categories above-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3></h3>
                    <p></p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
            <!--begin blog_item-->
            <div class="blog_item">
                <div class="top_img">
                    <img src="http://lorempixel.com/400/200" />
                </div>
                <div class="item_text">
                    <h3>Post Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    <a href="javascript:void(0)">Read Article</a>
                </div>
            </div><!--end blog_item-->
        </section>
        {% include 'partials/footer.html.twig' %}
</div>
{% endblock %}

{% endembed %}

Here is the JSON file:

{
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"
}
]
}

And here is the js:

var blogJson = "http://localhost:8888/sean/insights?return-as=json";//cache json url
var blogCat = angular.module('blogCategories', []);//cache app
//master controller
blogCat.controller('blogFilters', function($scope, $http) {
    $http.get(blogJson).then(function(res) {
        //grab all children json data
        $scope.childData = res.data.children;
        $scope.blogHeader = res.data.children[0];
    });
});

I would appreciate any help anyone could provide!

JoethaCoder
  • 494
  • 1
  • 6
  • 17
  • if you were to put $scope.test="test"; right above the $http in the controller, and add

    {{test}}

    into
    , can you let me know if it's printing "test"?
    – Dreamlines Jul 20 '16 at 00:36
  • Can you also add a console.log(res); in the $http.get and let us know if that's coming back correctly as well? – Dreamlines Jul 20 '16 at 00:53
  • Yes id did log to the console correctly. I think I figured out part of the issue by doing this: var blogCat = angular.module('blogCategories', []).config(function($interpolateProvider){ $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); }); As twig and angular use similar markup. The "Test" is printing, but prints twice. – JoethaCoder Jul 20 '16 at 15:50

0 Answers0