Append json results to a list of videos with AngularJS

Append json results to a list of videos with AngularJS
0.0 0

#1

I found a very good tutorial about Youtube API, the example is with AngularJS, but I needed to change, because the example list videos when you type something in the input form and I want to add more videos from the results when I click the button to load more.

So with my changes the code doesn’t work, I have the example in codepen, but it’s not compiling AngularJS variables:

http://codepen.io/Gisesonia/pen/OpGRzp

I didn’t understand exactly how to get nextPageToken.

    <div class="text-center" ng-if="checkLength(youtubePlaylist)">
                <input type="hidden" id="pageToken1" value="">
                <div class="btn-group" role="group" aria-label="...">                  
                  <button type="button" id="pageTokenNext1" ng-click="carregaMais(playlistId ,nextPageToken)" class="btn btn-default btn-carrega">Carregar mais videos...</button>
                  
                </div>
              </div>

 app.controller('ListaVideos', []);
        var channelId = 'UC2pmfLm7iq6Ov1UwYrWYkZA';        
        var key = 'API Key';       
        var pageToken; 
        app.factory('youtubeService', ['$http', function ($http) {         
            function getPlaylistItems(id, pagina_selecionada) {
                var opcoes = { 
                    part: 'snippet',                                     
                    playlistId: id,
                    key: key,                 
                  };

                   if (pageToken !== null){
                        opcoes.pageToken = pagina_selecionada;                      
                    }

                 console.log(opcoes)
                 return $http.get('https://www.googleapis.com/youtube/v3/playlistItems', { 
                  params: opcoes
                });
            }
            return { 
              getPlaylistItems: getPlaylistItems                
            }
            console.log(opcoes)
        }]);

//controller
    app.controller('VideoPlayerController', ['$http','$scope','$uibModal','$sce','youtubeService', '$log', function ($http, $scope,$uibModal, $sce, youtubeService,$log) {
        
        $scope.youtubePlaylist = [];         
        $scope.aceitaUrl = function(video) {                  
                return $sce.trustAsResourceUrl(video);//cuida da parte de autorização Cross Origin                
        }   
        youtubeService.getPlaylistItems('PLhEguvmo7mSPjBv1XHxJn7A3zHLFTLSFT', 'CAUQAA')
        .then(function (response) { 
                      
               $scope.youtubePlaylist = response.data.items;
               $scope.nextPageToken = response.data.nextPageToken;
              console.log(response.data.nextPageToken);
             console.log(response.data)
             
              
              $.each($scope.youtubePlaylist, function(index, item) {
                    
                  console.log(item.snippet.playlistId);
                 return $scope.playlistId =item.snippet.playlistId; 

              });
             
             
              });        
                                
               $scope.checkLength = function(data){
                return (data.length >=1);
                   console.log(data);
               };
      
      $scope.divHtmlVar = '';
              $scope.carregaMais = function( itemId, nextPage) {
                  $scope.nextPageToken = nextPage;
                  $scope.playlistId = itemId;
                  $scope.divHtmlVar = $scope.divHtmlVar + '<br/><i>'+nextPage+'</i>';  
                   console.log($scope.nextPageToken)
                  //console.log(nextPage);
                  //console.log(id);
                  //console.log(youtubeService.getPlaylistItems( id, nextPage));   
              }

            
      
           $scope.playVideo = function (videoId, videoTitle) { 
              var dialog = $uibModal.open({
                  templateUrl: 'modal.html',
                  controller: VideoYoutubeController,
                  scope:$scope.$new(true),
                  resolve: {
                      video: function () {  
                        return {
                            url: 'https://www.youtube.com/embed/'+videoId,
                            title: videoTitle
                        }
                      }
                  },
                  size: 'md'
                })
              
                dialog.result.then(function (selectedItem) {
                  $uibModal.selected = selectedItem;
                    }, function () {
                  $log.info('Modal dismissed at: ' + new Date());
                });               
                
            };
           
             var VideoYoutubeController = function ($scope, $uibModalInstance, video) {
              $scope.video = video;
              $scope.trustSrc = function(video) {               
                return $sce.trustAsResourceUrl(video);//cuida da parte de autorização Cross Origin                
              }   
              $scope.ok = function () {
                  $uibModalInstance.close();
              };
              $scope.cancel = function () {
                    $uibModalInstance.dismiss('cancel');
                };  
                 
             };
            VideoYoutubeController['$inject'] = ['$scope', '$uibModalInstance', 'video'];
       
    }]);

#2

I don’t know Angular from a hole in the ground. Could you post the video you found, at least for my own edification?


#3

Tutorial:

http://www.w3tweaks.com/youtube/angularjs-instant-youtube-video-search-api-v3-version-tutorial.html