AngularJS GET 404 not found

Question

Currently working on Angular JS tv application. Application receives data from api call. I am trying to get images from an array of results.

Here is the code for mainController.js

app.controller("mainController", function($scope, $http){ $scope.apiKey = "b3e2e6f87d3aeec3075668a1bd4a78e2"; $scope.init = function(){ //api call requires format, apiKey, date, and days var today = new Date(); //format apiDate according to the api specifications var apiDate = today.getFullYear() + ("0" + (today.getMonth()+1)) + today.getDate(); $scope.results = []; console.log(apiDate); $http.jsonp('http://api.trakt.tv/calendar/premieres.json/' + $scope.apiKey + '/' + apiDate + '/' + 30 + '/?callback=JSON_CALLBACK').success(function (data){ //connection successful //console.log(data); angular.forEach(data, function (value, index){ var date = value.date;//stores the date of the tv shows angular.forEach(value.episodes, function (tvshow, index){ //this adds the locally store date to the tvshow object tvshow.date = date; $scope.results.push(tvshow); });//end 2nd for each });//end 1st for each }).error(function (error){ //connection failed }); }; }); 

Here is the code for index.html

  <ul class="episode-list"> <li ng-repeat="tvshow in results"> <div class="row-fluid"> <div class="span3"> <img src="{{tvshow.episode.images.screen}}"/> </div> </div> </li> </ul> 

The console returns the following errors:

GET: //localhost/tvApp/%7B%7Btvshow.episode.images.screen%7D%7D 404 (not found) localhost /: 29

GET // localhost / tvApp /% 7B% 7Btvshow.episode.images.screen% 7D% 7D 404 (not found) angular.min.js: 20

I do not quite understand why this is happening. Any help would be appreciated. I was looking for a similar problem, but did not have time

Answer 1

Use ng-src instead of src :

 <img ng-src="{{tvshow.episode.images.screen}}"> 

This prevents the image from loading before Angular markup is processed by the AngularJS function. Using src will load the literal url http://www.mydomain.com/{{tvshow.episode.images.screen}} .

Answer 2

Make sure your callback is successfully called.

Make sure your TV show has episodes containing images that contain a screen. No typos?