How can I display data from nested JSON in the context of the ng-click (Angular, JSON)

Question

I'm trying to figure out how I can display nested json data that pertains to the data from the previous ng-click.

Any insight would be greatly appreciated, thanks!

plunker: http://plnkr.co/edit/C7MlbHDawSdASHl1aLBB?p=preview

HTML

<ul class="list-unstyled">
  <li ng-repeat="content in contentSets" ng-click="setContent(content)">
    <a href="#">{{content.name}}</a>
  </li>
</ul>

<h1>{{useContent.contentTitle}}</h1>

<ul class="list-unstyled">
  <li ng-repeat="headline in useContent.headlines">
    {{headline.title}}
  </li>
</ul>

JSON

            {
              "contentData": [

                {
                    "contentId": 1,
                    "name": "Content set 1",
                    "contentTitle": "Pretaining to content set 1",
                    "news": [
                        {
                          "headlineSet": 1,
                          "headlines": [
                              {
                                "title": "headline 1 (set 1)",
                                "date": "date for headline 1 (set 1)"
                              },
                              {
                                "title": "headline 2 (set 1)",
                                "date": "date for headline 2 (set 1)"
                              },
                              {
                                "title": "headline 3 (set 1)",
                                "date": "date for headline 3 (set 1)"
                              }
                            ]
                        }
                    ]

                },
                {
                    "contentId": 2,
                    "name": "Content set 2",
                    "contentTitle": "Pretaining to content set 2",
                    "news": [
                        {
                          "headlineSet": 1,
                          "headlines": [
                              {
                                "title": "headline 1 (set 2)",
                                "date": "date for headline 1 (set 2)"
                              },
                              {
                                "title": "headline 2 (set 2)",
                                "date": "date for headline 2 (set 2)"
                              },
                              {
                                "title": "headline 3 (set 2)",
                                "date": "date for headline 3 (set 2)"
                              }
                            ]
                        }
                    ]
                },
                {
                    "contentId": 3,
                    "name": "Content set 3",
                    "contentTitle": "Pretaining to content set 3",
                    "news": [
                        {
                          "headlineSet": 1,
                          "headlines": [
                              {
                                "title": "headline 1 (set 3)",
                                "date": "date for headline 1 (set 3)"
                              },
                              {
                                "title": "headline 2 (set 3)",
                                "date": "date for headline 2 (set 3)"
                              },
                              {
                                "title": "headline 3 (set 3)",
                                "date": "date for headline 3 (set 3)"
                              }
                            ]
                        }
                    ]
                }
              ]
            }

JS

 function AppController($scope, $http) {

   $http.get('content.json').success(function(data) {
     $scope.contentSets = data.contentData;

     $scope.news = [];
     $scope.headlines = [];

     angular.forEach(data.contentData, function(demoContent, index){

      angular.forEach(demoContent.news, function(newsGroup, index){
       $scope.news.push(newsGroup);

       angular.forEach(newsGroup.headlines, function(headline, index){
        $scope.headlines.push(headline);
       });
     });
    });

  });

  $scope.setContent = function(content) {
    $scope.useContent = content;
  }
}

Bogdan Savluk · Accepted Answer · 2014-06-17 20:29:52Z

2

You can do it directly in view:

<ul class="list-unstyled" ng-repeat="news in useContent.news">
  <li ng-repeat="headline in news.headlines">
    {{headline.title}}
  </li>
</ul>

http://plnkr.co/edit/WoNBqN13aRlN3eUwjh3t

answered Jun 17, 2014 at 20:29

Bogdan Savluk

6,3121 gold badge32 silver badges37 bronze badges

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

2 Comments

MuddyMudSkipper Over a year ago

Thank you, I overly complicated it!

jluna Over a year ago

Nice and simple! :) @MuddyMudSkipper I think the "problem" is that you weren't considering that all the inner headlines are inside the news array. Edit: I hadn't seen you had answered already :P

Collectives™ on Stack Overflow

How can I display data from nested JSON in the context of the ng-click (Angular, JSON)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related