Displaying elements in angularjs template from nested json

Question

I am attempting to access nested json data in a template in angularjs. I've attached what I have. The repeat section is working, but the {{title}} is not.

Sample JSON

[{

            "title": "Sample Campaign Title",
            "dateStart" : "Aug 1, 2014",
            "dateEnd" : "Aug 31, 2014",
            "results" : [
                {
                    "tableTitle": "Performance",
                    "thead": [
                        { "tr" : "Campaign" },
                        { "tr" : "Impressions" },
                        { "tr" : "Clicks" },
                        { "tr" : "CTR" },
                        { "tr" : "Cost" },
                        { "tr" : "Actions"  }

                    ],

                    "values" : [
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "$753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        }
                    ]
                },

                {
                    "tableTitle": "Table Number 2",
                    "thead": [
                        { "tr" : "Campaign" },
                        { "tr" : "Impressions" },
                        { "tr" : "Clicks" },
                        { "tr" : "CTR" },
                        { "tr" : "Cost" },
                        { "tr" : "Actions"  }

                    ],

                    "values" : [
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "134",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        }
                    ]
                },

                {
                    "tableTitle": "Table Number 3",
                    "thead": [
                        { "tr" : "Campaign" },
                        { "tr" : "Impressions" },
                        { "tr" : "Clicks" },
                        { "tr" : "CTR" },
                        { "tr" : "Cost" },
                        { "tr" : "Actions"  }

                    ],

                    "values" : [
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "135",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        },
                        {
                            "Campaign" : "Search - Spokane Google AdWords Keywords",
                            "Impressions" : "22,610",
                            "Clicks" : "134",
                            "CTR" : "0.60%",
                            "Cost" : "753.75",
                            "Actions" : "n/a"
                        }
                    ]
                }
            ]

    }]

Factory

angular.module('reportApp')

.factory('Reports', ['$http', function ($http) {

    return {
        getResults: function(callback) {
            $http.get('sampleData/campaign.json').success(callback);
        }
    }

}]);

controller

.controller('ResultsCtrl', ['$scope', 'Reports', function($scope, Reports){

    Reports.getResults(function(data) {
        $scope.reports = data;
    });

 }])

And template, repeats are working, it is the {{title}} that is not

<header class="main-header">
        <div class="row">
            <div class="small-12 columns">

                <h1>{{title}}</h1>

            </div>

        </div>

</header>
      <div ng-repeat="report in reports">
            <div class="row vert1" ng-repeat="table in report.results">
                <div class="small-12 columns">
                    <h2>{{ table.tableTitle }}</h2>
                    <table>
                        <thead>
                            <tr>
                                <th ng-repeat="thead in table.thead">{{ thead.tr }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="tr in table.values">
                                <td>{{tr.Campaign}}</td>
                                <td>{{tr.Impressions}}</td>
                                <td>{{tr.Clicks}}</td>
                                <td>{{tr.CTR}}</td>
                                <td>${{tr.Cost}}</td>
                                <td>{{tr.Actions}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

I'll go ahead and start working on the plinker example. The issue I'm having is that in the template, {{title}} is not displaying a value. Also, I did edit the controller a bit, realized that I had some debug stuff still in there. — user641957
– user641957, Commented Sep 7, 2014 at 4:28

AndrewS · Accepted Answer · 2014-09-07 04:34:30Z

1

title is in the first element of the campaign data. So it would be scope.title = data[0].title.

answered Sep 7, 2014 at 4:34

AndrewS

1,67611 silver badges15 bronze badges

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

Comments

user12121234 · Accepted Answer · 2014-09-07 04:30:09Z

0

One thing I see that is a little funny is that you have the ng-controller set in the header. Maybe try taking this out of the header and putting the controller in a div.

answered Sep 7, 2014 at 4:30

user12121234

2,5792 gold badges28 silver badges29 bronze badges

1 Comment

user641957 Over a year ago

Thank you for looking at this. I realized I copied over some of my attempts to see what was going on. In what I'm working on, I'm setting the controller through routes - accidentally left the ng-controller in the markup, it is out now.

Collectives™ on Stack Overflow

Displaying elements in angularjs template from nested json

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related