JohnDotHR JohnDotHR - 6 months ago 30
jQuery Question

Getting thumbnails from a JSON

I need this script to be able to pull out thumbnails from the Google API JSON, for some reason, it doesn't seem to be working. Attached a jsfiddle as 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

As @squint suggests, you can replace callback=handleResponses with callback=? in the API URL, to let jQuery handle the callback (because you haven't created any handleResponses function).

You also need to change this:

googleData[i].thumbnail

into this:

googleData[i].volumeInfo.imageLinks.thumbnail

Fixed JSFiddle

Comments