Получение эскизов из JSON

Question

Мне нужен этот сценарий, чтобы вытаскивать эскизы из API Google JSON, по какой-то причине он, похоже, не работает. Прикрепленный jsfiddle в 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

В URL API, вы оставили callback=handleResponses, но это было бы только в том случае, если у вас была такая функция, объявленная в вашем коде. С помощью этого параметра вы получите JSONP (вызов JS для этой функции), а не JSON.

Вы можете просто удалить, что, чтобы получить JSON (но это, возможно, не в устаревших браузерах, которые не поддерживают CORS), или, как @squint предлагает заменить callback=handleResponses с callback=? в URL API, чтобы позволить JQuery обработки обратного вызова.

Кроме того, необходимо изменить:

в этом:

googleData[i].volumeInfo.imageLinks.thumbnail

Fixed JSFiddle