I am currently working on a project where I need to fetch all the playlists from a specific channel and then display the name of each playlist in my AngularJS application.
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();
});
Currently, when I reference {{playlist}}, it shows all the json data correctly. However, I only want to display the title of each playlist. I attempted using {{playlist.items.snippet.title}} but that didn't work. Can someone help me out with this issue?
Thank you in advance.
UPDATE: Provided below is the HTML code:
<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>