AngularJS GET 404 Not Found

Question

Currently working on an Angular JS tv application. The app gets data from an api call. I am trying to obtain the images from the results array.

Here's the code for the 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's the code for the 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 am not quite sure why this is happening. Any help would be appreciate. I have been looking around for a similar issue but no success

Solution

Use ng-src instead of src:

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

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

Comments

[Tarang Hirani]

The success call back is triggering because the $scope.results array is populated. Do you need to see any other code? I am following this example: code.tutsplus.com/tutorials/…

[Sarower Jahan]

Great solution.