AngularJS Ajax get issue - ajax

Question

I am a bit new to angular and am scratching my head over this one. my factory console.log's show that the first time through everything is defined correctly, but the factory is for some reason re-evaluating the data I pass it to undefined. Here is my code starting with the html input that is passing the data to the controller then to the factory:
HTML:
<input type="text" placeholder="Enter Channel" ng-model="channel" ng-keydown="$event.which === 13 && cname(channel)"/>
This will send to my controller what is typed in the input field once the enter key is pressed cnam(channel)
Controller and Factory:
angular.module('youtubePlaylistAppApp')
.factory('ytVids', function($http){
return{
getChannel: function(name){
console.log('name: '+name);
var url = 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername='+ name +'&key=[my api key]';
console.log(url);
return $http.get(url);
},
getVids: function(channel){
console.log('channel: '+ channel);
return $http.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId='+channel+'&key=[my api key]')
.success(function(response){
//console.log(response.items);
return response.items;
});
}
};
})
.controller('indexCtrl', function ($scope, ytVids) {
$scope.cname = function(channel){
console.log(channel);
ytVids.getChannel(channel);
ytVids.getChannel().success(function(response){
console.log(response);
console.log(response.items[0].contentDetails.relatedPlaylists.uploads);
ytVids.getVids(response.items[0].contentDetails.relatedPlaylists.uploads)
.success(function(data){
console.log(data.items);
$scope.ytChannel = data.items;
});
});
};
});
Here is the output I am seeing in my console dev tools after enter is pressed when typing in the input field:
the first console log console.log(channel); console logs the correct response. If I type "freddiew" and press enter, that is what is logged
Then I pass that into my factory ytVids.getChannel(channel); and console log in the factory console.log('name: '+name); This logs the correct response as in name: freddiew
I then declare a variable var url = and give it the youtube url and concat the channel name with the url
I then console log the variable and get what is expected https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=freddiew&key=[my api key]'
This url works when I have tried it in postman and just hard coding a name in. but passing in the name, the console then spits out some more logs which I dont know why, and it looks like it overides the url I just built out to make the call because this is what is logged from the factory:
name: freddiew
https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=freddiew&key=[my key]
It is then logged after this as undefined and the api call concats undefined with the url and makes the api call with this undefined url
name: undefined
https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=undefined&key=[my key]
forUsername= is where the channel name should go.
anyone know why it is being defined as undefined?

Answer 1

I think you have wrong extra service call.
.controller('indexCtrl', function ($scope, ytVids) {
$scope.cname = function(channel){
console.log(channel);
//ytVids.getChannel(channel); <-- you should remove this & passed channel param in below call
ytVids.getChannel(channel).success(function(response){
console.log(response);
console.log(response.items[0].contentDetails.relatedPlaylists.uploads);
ytVids.getVids(response.items[0].contentDetails.relatedPlaylists.uploads)
.success(function(data){
console.log(data.items);
$scope.ytChannel = data.items;
});
});
};
});