Shane Wen Shane Wen - 4 months ago 30
AngularJS Question

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

I'm new to this forum and also ionic. I was getting started with ionic following this tutorial but I got stuck at the step where they say I should have at least 5 returned object.

In my console, I see this:



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





As you can see, items array is Array[0]. What have i done wrong?

Here are my codes :
index.html and below is app.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){
// });
});

});

}());




Answer

You have done everything right but the problem is about what to search for (value of q) and which channel to search (value of channelId). As you see bellow I've changed the q and also removed channelId (which is not necessary) and result array is not empty any more.

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

Comments