Repeating over nested Objects with Angular JS

Question

I've been playing with the google feed API for a podcasts I run and wanted to include a simple ng-repeat to display the title and link URL to the MP3. However the JSON google provides is nested in several different Objects and Arrays. For instance, my JSON feed looks like this:

{
    "responseData": {
        "feed": {
            "feedUrl": "http://feeds.feedburner.com/stillgotgame",
            "title": "2old2play presents Still Got Game",
            "link": "http://www.2old2play.com/",
            "author": "",
            "description": "Still Got Game focuses on the gaming industry from the perspective of adult gamers.  We look at news, reviews, and inside information in the world of video games.  Each episode touches on the community, the industry, and the games that keep us coming back.",
            "type": "rss20",
            "entries": [
                {
                    "mediaGroups": [
                        {
                            "contents": [
                                {
                                    "url": "http://traffic.libsyn.com/dsmooth/Still_Got_Game_Episode_33__Coast_to_Coast.mp3",
                                    "fileSize": "35346436",
                                    "type": "audio/mpeg"
                                }
                            ]
                        }
                    ],
                    "title": "Still Got Game Ep. 33: Coast to Coast",
                    "link": "http://2old2play.com/media/still-got-game-ep-33-coast-coast/",
                    "author": "[email protected]",
                    "publishedDate": "Tue, 06 May 2014 22:05:01 -0700",
                    "contentSnippet": "DSmooth finally has his Rocket Bro back. After a multi-week hiatus for Doodirock's move to the West Coast, they boys were back ...",
                    "content": "DSmooth finally has his Rocket Bro back. After a multi-week hiatus for Doodirock's move to the West Coast, they boys were back in force this week. The duo talk gaming news and the new releases, cover a bunch of viewer feedback, and talk a bit about what may be the worst moving company ever. They'll have you LMFAOing! You can always call the boys at (773) 527-2961 and weigh in yourself, or tune in live Monday nights at 9:00 EDT at http://twitch.tv/2old2play ...",
                    "categories": [
                        "Audio"
                    ]
                }
            ]
        }
    },
    "responseDetails": null,
    "responseStatus": 200
}

As you can see, in order to get to the items URL to the MP3 I have to go through entries, mediaGroups, and Contents before I even reach the Array I need! I start off inside the entries with this factory I've created:

  .factory('audioFEED', function($resource){
    return $resource('http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=100&q=http://feeds.feedburner.com/stillgotgame',{},
      {
      query:{
        method:'JSONP',
        params: {callback: 'JSON_CALLBACK'},
        isArray:false,
        headers:{
          'Access-Control-Allow-Origin': '*'
        }
      },
    });
  });

Thats easy enough with just setting up the data on the controller here:

'use strict';

angular.module('twitchappApp')
    .controller('audioCtrl', function($scope, audioFEED) {

        audioFEED.query(function(data){
            $scope.audios = data.responseData.feed.entries;
            console.log($scope.audios);
        });
    });

However, In order to get to that data I'm having to set up multiple ng-repeats with on inside of the next. I would really like to find a better way to handle this data within the controller and access the URL inside one ng-repeat. It seems this way is adding more over head and probably not the best over all method. Is there a best practice for this? My current end result looks like this:

<h1>Audio</h1>
<div ng-repeat="audio in audios">
  <h3><a href="{{audio.link}}">{{ audio.title }}</a></h3>
  <p>{{audio.contentSnippet}}</p>
  <div ng-repeat="play in audio.mediaGroups">
        <div ng-repeat="playurl in play.contents">
            <a href="{{playurl.url}}">PLAY</a>
        </div>
    </div>
</div>

Yuk...

Have you considered just converting the data to a sane format before feeding it to ng-repeat? It seems easier to me to use javascript to build an array containing just the things you need rather than trying to coerce ng-repeat into chewing it for you. — ivarni
– ivarni, Commented May 16, 2014 at 6:31
Per @ivarni - have you considered using something like underscorejs (or you could write it yourself I suppose) to extract the data you're looking for in to a flatter format for your ng-repeat? — Andrew Church
– Andrew Church, Commented May 16, 2014 at 12:36

Andrew Church · Accepted Answer · 2014-05-16 13:38:28Z

Check out this JSFiddle. Uses underscore to flatten your data down to an easier to work with array. http://jsfiddle.net/ahchurch/sKeY9/3/

Template

<div ng-controller="MyCtrl">
    <div ng-repeat="playurl in contents">
            <a href="{{playurl.url}}">PLAY</a>
        </div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    var responseData = {
    "responseData": {
        "feed": {
            "feedUrl": "http://feeds.feedburner.com/stillgotgame",
            "title": "2old2play presents Still Got Game",
            "link": "http://www.2old2play.com/",
            "author": "",
            "description": "Still Got Game focuses on the gaming industry from the perspective of adult gamers.  We look at news, reviews, and inside information in the world of video games.  Each episode touches on the community, the industry, and the games that keep us coming back.",
            "type": "rss20",
            "entries": [
                {
                    "mediaGroups": [
                        {
                            "contents": [
                                {
                                    "url": "http://traffic.libsyn.com/dsmooth/Still_Got_Game_Episode_33__Coast_to_Coast.mp3",
                                    "fileSize": "35346436",
                                    "type": "audio/mpeg"
                                }
                            ]
                        }
                    ],
                    "title": "Still Got Game Ep. 33: Coast to Coast",
                    "link": "http://2old2play.com/media/still-got-game-ep-33-coast-coast/",
                    "author": "[email protected]",
                    "publishedDate": "Tue, 06 May 2014 22:05:01 -0700",
                    "contentSnippet": "DSmooth finally has his Rocket Bro back. After a multi-week hiatus for Doodirock's move to the West Coast, they boys were back ...",
                    "content": "DSmooth finally has his Rocket Bro back. After a multi-week hiatus for Doodirock's move to the West Coast, they boys were back in force this week. The duo talk gaming news and the new releases, cover a bunch of viewer feedback, and talk a bit about what may be the worst moving company ever. They'll have you LMFAOing! You can always call the boys at (773) 527-2961 and weigh in yourself, or tune in live Monday nights at 9:00 EDT at http://twitch.tv/2old2play ...",
                    "categories": [
                        "Audio"
                    ]
                }
            ]
        }
    },
    "responseDetails": null,
    "responseStatus": 200
};
    //Underscore:
    $scope.contents = _.flatten(_.map(responseData.responseData.feed.entries, function(entry){
    return _.map(entry.mediaGroups, function(mediaGroup){
        return mediaGroup.contents;
    });
}));

    $scope.name = 'Superhero';
}

This is perfect for what I'm doing and really great for anyone looking to flatten a data structure! Thanks so much Andrew and @ivarni for the help.

Collectives™ on Stack Overflow

Repeating over nested Objects with Angular JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related