在 AngularJS 中输出 YouTube API 数据答案

【问题标题】：Outputting YouTube API data in AngularJS在 AngularJS 中输出 YouTube API 数据
【发布时间】：2015-06-16 18:24:01
【问题描述】：

我正在尝试从某个频道检索所有播放列表，并在我的 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.sn-p.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>

【问题讨论】：

我的猜测是这些属性之一包含一个数组，而您没有正确引用该数组中的项目。
正如@KevinB 所说。 items 是一个数组。也许 playlist.items[0].sn-p.title 会给你第一个标题等？
@theduck 我试过了，但不幸的是仍然没有打印出来。
你的 HTML 看起来怎么样？
{{playlist.items[0].snippet.title}} 应该打印出标题！

标签： javascript angularjs youtube-api

【解决方案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

【讨论】：

它仍然无法正常工作...很抱歉给您带来了麻烦，但我真的很感谢所有的帮助。另外，当我右键单击并检查页面时，它显示 ng-repeat 由于某种原因被注释掉了。
您能在网络控制台中查看 youtube 的实际响应吗？
我不太确定..我之前没有阅读过网络响应。我也忘了提一下，如果我只放 {{playlist}} 它会立即显示所有 JSON 信息。
好的，你能把{{playlist}}放在这里时看到的实际JSON贴出来吗？）
哇，我刚刚意识到在你给我的代码中它说的是“playlist.items”而不是“playlists.items”..它现在工作了！！非常感谢！你太棒了！！