使用 ionic 为 YouTube 频道构建混合移动应用:数组返回值 0

Building Hybrid Mobile Apps for YouTube Channel with ionic: Array return value 0

本文关键字:应用 数组 返回值 移动 混合 ionic YouTube 频道 构建 使用      更新时间:2023-09-26

我是这个论坛的新手,也是离子的。我按照本教程开始使用离子,但我卡在他们说我应该至少有 5 个返回对象的步骤中。

在我的控制台中,我看到以下内容:

Object {kind: "youtube#searchListResponse", etag: ""5g01s4-wS2b4VpScndqCYc5Y-8k/laShVU5DlHERrc8rfTBVxO0BH0k"", regionCode: "MY", pageInfo: Object, items: Array[0]}

如您所见,items 数组是 Array[0]。我做错了什么?

这是我的代码:索引.html下面是应用程序.js

(function(){
 
    var app = angular.module('BooWoow', ['ionic'])
    app.run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
      if(window.cordova && window.cordova.plugins.Keyboard) {
      
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
       }
    });
});
  app.controller('bcontrol', function ($scope, $http){
      // $scope.videos = [
      // {
      //   title: "My first video",
      //   date: "1-1-2015",
      //   thumbnails: "http://i.ytimg.com/vi/bJp1ptX4F3M/maxresdefault.jpg",
      // },
      // {
      //   title: "My second video",
      //   date: "5-7-2015",
      //   thumbnails: "http://i.ytimg.com/vi/NA2VerbOyt0/maxresdefault.jpg",
      // }
      // ];
    $scope.videos = [];
    $scope.youtubeParams = {
      key:'AIzaSyDUbabBoC8eqrsp7OZiIJ9_5RmnbVl08A0',
      type: 'video',
      maxResults: '5',
      part: 'id,snippet',
      q: 'youtube#searchListResponse',
      order: 'date',
      channelId:'UCosQ8Pm_9hU3Ck878svpKeQ',
    }
    $http.get('https://www.googleapis.com/youtube/v3/search', {params:$scope.youtubeParams}).success(function(response){
       console.log (response);
       // angular.forEach(response.items, function(child){
      // });
    });
  });
}());

你做对了一切,但问题是要搜索什么(q的值)和要搜索哪个频道(channelId 的值)。正如您在下面看到的,我已经更改了q并删除了channelId(这不是必需的),结果数组不再为空。

(function() {
  console.clear()
  var app = angular.module('BooWoow', ['ionic'])
  app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  });
  app.controller('bcontrol', function($scope, $http) {
    $scope.videos = [];
    $scope.youtubeParams = {
      key: 'AIzaSyDUbabBoC8eqrsp7OZiIJ9_5RmnbVl08A0',
      type: 'video',
      maxResults: '5',
      part: 'id,snippet',
      q: 'youtube',
      order: 'date',
      //channelId: 'UCosQ8Pm_9hU3Ck878svpKeQ',
    };
    $http
      .get('https://www.googleapis.com/youtube/v3/search', {
        params: $scope.youtubeParams
      }).then(function(response) {
        console.log(response.data.items.length);
      });
  });
}());
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/js/angular-ui/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/js/angular/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/js/angular/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/js/angular/angular-sanitize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/css/ionic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/js/ionic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.1/js/ionic-angular.js"></script>
<div ng-app="BooWoow" ng-controller="bcontrol"></div>