0

我一直在为我运行的播客使用谷歌提要 API，并希望包含一个简单的 ng-repeat 来显示 MP3 的标题和链接 URL。然而，谷歌提供的 JSON 嵌套在几个不同的对象和数组中。例如，我的 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>

玉...

4

1 回答 1

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';
}
于 2014-05-16T13:27:28.177 回答