在AngularJS中输出YouTube API数据

时间:2015-06-16 18:24:02

标签: javascript angularjs youtube-api

我试图从某个频道中检索所有播放列表,并在我的AngularJS应用中打印出每个播放列表的名称。

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

myApp.factory('videoApi', function ($resource) {
  return $resource(            'https://www.googleapis.com/youtube/v3/playlists', 
         {callback: 'JSON_CALLBACK'},
         { 
          get: { 
            method: 'JSONP', 
            params: { 
              part: 'snippet',
              channelId: '**removed**',
              maxResults: 50,
              key: '**removed**' },
            isArray : false,
          } 
        } );
});

myApp.controller('WebService', function ($scope, videoApi) {
   $scope.playlist = videoApi.get();
});

这就是我现在所拥有的,当我呼叫{{playlist}}时,它会正确显示所有json信息。但是,我只想打印标题。我试过了{{playlist.items.snippet.title}},但那并没有奏效。我希望有人可以帮我一把。

提前致谢。

编辑:这是HTML代码:

<head>
<script type="text/javascript" src="https://code.angularjs.org/1.1.4/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script>
<script type="text/javascript" src="crashcourse.js"></script>
</head>
<body>

<div ng-app="app">
     <div ng-controller="WebService">
        {{playlist.items[0].snippet.title}}
     </div>
</div>

</body>

1 个答案:

答案 0 :(得分:1)

您应该像这样更新您的HTML:

<div ng-app="app">
  <div ng-controller="WebService">
    <div ng-repeat="item in playlist.items">
        {{item.snippet.title}}
    </div>
  </div>
</div>

你可以看到响应有一个items数组! 见https://developers.google.com/youtube/v3/docs/playlists/list