2014-06-15 2 views
6

Attualmente funziona su un'applicazione TV JS angolare. L'app riceve i dati da una chiamata API. Sto cercando di ottenere le immagini dall'array dei risultati.AngularJS GET 404 non trovato

Ecco il codice per le 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 
     }); 
    }; 
}); 

Ecco il codice per l'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> 

La console restituisce i seguenti errori:

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

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

io non sono del tutto sicuro perché questo sta accadendo. Qualsiasi aiuto sarebbe apprezzato. Ho cercato un problema simile ma non ho avuto successo

+0

Non c'è niente di sbagliato nel tuo codice, forse il tuo link per ottenere $ http non è corretto logicamente, tutto il tuo codice è corretto – Milad

risposta

14

Uso ng-src anziché src:

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

Ciò impedisce che l'immagine venga caricato prima il codice angolare viene elaborato da AngularJS. Utilizzando src verrà caricato l'url letterale http://www.mydomain.com/{{tvshow.episode.images.screen}}.

+0

Grazie! Funziona. –

+0

Ottima soluzione. –

0

Controlla che il tuo callback di successo sia effettivamente attivato.

Verificare che il programma TV contenga episodi, che contengano immagini, che contengano lo schermo. Nessun errore ortografico?

+0

Il richiamo di successo si attiva perché l'array $ scope.results è popolato. Hai bisogno di vedere un altro codice? Sto seguendo questo esempio: http://code.tutsplus.com/tutorials/building-a-web-app-from-scratch-in-angularjs--net-32944 –