Miniaturansichten von einem JSON abrufen

Question

Ich brauche dieses Skript, um Thumbnails aus dem Google API JSON herausziehen zu können. Aus irgendeinem Grund scheint es nicht zu funktionieren. Befestigt ein jsfiddle als wel.l

 <div id="book-shelf"> 

     </div> 
        $(function() { 
    var i=0; 
    var googleApi = "https://www.googleapis.com/books/v1/volumes?q=edgar+allan+poe"; 
    var googleData; 
    $.getJSON(googleApi, function(json) { 
     googleData = json; 

     setData() 
    }); 

    function setData(){ 
     var j = googleData.length > (i + 9) ? (i + 9) : googleData.length; 
     for (; i < j; i++) { 
      var googleThumb = googleData[i].thumbnail; 
      var img = $('<img style="width: 250px; height: 250px;" src="' + googleThumb + '"/>') 
      $('#book-shelf').append(img); 
     } 
    }  

    $('#load').click(function() { 
     setData(); 
    }); 
}); 



     https://jsfiddle.net/mo7skwrj/ 

Answer 1

In der API-URL, links Sie callback=handleResponses, aber das wäre nur dann anwendbar, wenn Sie eine Funktion in Ihrem Code deklariert solche hatte. Mit diesem Parameter würden Sie JSONP (ein JS-Aufruf für diese Funktion) und nicht JSON erhalten.

könnten Sie entfernen, genau das JSON zu bekommen (aber es könnte in Legacy-Browser fehlschlagen, die nicht CORS unterstützen), oder, wie @squint vermuten läßt, ersetzen callback=handleResponses mit callback=? in der API-URL zu lassen jQuery den Rückruf zu behandeln.

Sie müssen auch diese ändern:

in diese:

googleData[i].volumeInfo.imageLinks.thumbnail

Fixed JSFiddle