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

There is nothing wrong with your code , maybe your link for getting $http is not correct logically , all your code is correct — Milad
– Milad, Commented Jun 15, 2014 at 17:49

knbk · Accepted Answer · 2014-06-15 19:43:41Z

14

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}}.

edited Jun 15, 2014 at 19:43

knbk

53.9k9 gold badges130 silver badges128 bronze badges

answered Jun 15, 2014 at 19:11

NoWhereToBeSeen

1,4541 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sarower Jahan Over a year ago

Great solution.

possiblyLethal · Accepted Answer · 2014-06-15 17:53:32Z

0

Check to make sure your success callback is actually triggering.

Check to make sure your tvshow contains episodes, which contains images, which contains screen. No misspellings?

answered Jun 15, 2014 at 17:53

possiblyLethal

1916 bronze badges

1 Comment

Tarang Hirani Over a year ago

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/…

Collectives™ on Stack Overflow

AngularJS GET 404 Not Found

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related