使用Angular JS重复嵌套对象

时间:2014-05-16 06:17:35

标签: json angularjs rss google-feed-api

我一直在使用google feed API播放我播放的播客,并希望包含一个简单的ng-repeat来显示MP3的标题和链接网址。但是,JSON google提供的嵌套在几个不同的对象和数组中。例如,我的JSON提要如下所示:

{
    "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": "podcast@2old2play.com",
                    "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
}

正如您所看到的,为了获取MP3的项目URL,我必须先访问条目,媒体组和内容,然后才能访问我需要的数组!我从我创建的这家工厂的条目开始:

  .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': '*'
        }
      },
    });
  });

这很简单,只需在控制器上设置数据:

'use strict';

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

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

但是,为了获得该数据,我必须在下一个内部设置多个ng-repeats。我真的想找到一种更好的方法来处理控制器中的这些数据并访问一个ng-repeat内的URL。似乎这种方式增加了更多的头脑,可能不是最好的方法。这是最好的做法吗?我目前的最终结果如下:

<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>

...育

1 个答案:

答案 0 :(得分:2)

看看这个JSFiddle。使用下划线将数据展平为更容易使用数组。 http://jsfiddle.net/ahchurch/sKeY9/3/

<强>模板

<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": "podcast@2old2play.com",
                    "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';
}