Question

I am having a difficult time simply appending data to an element from a JSON file. I have the following

Link to JSON

Here is the jQuery I am trying to use –

$.ajax({
    url: 'https://www.googleapis.com/books/v1/volumes?q=:isbn=0-13-727827-6',
    dataType: 'json',
    success: function(data){
        $.each(data.items, function(index){
            $(".tab1").append("<div>"+data.title+"</div>");
        });
    }
});

From the JSFiddle

You can see I am going wrong! I am looking to pull the title of the book from Item->volumeInfo->title Every time I try to reference the node volumeInfo i get an error

Answer 1

data here is the top level object, not each item you are trying to loop through. JQuery each function provides two parameters, index, and current item you are looping though. So use the second parameter instead:

$.ajax({
    url: 'https://www.googleapis.com/books/v1/volumes?q=:isbn=0-13-727827-6',
    dataType: 'json',
    success: function(data){
        $.each(data.items, function(index, item){
            $(".tab1").append("<div>"+item.volumeInfo.title+"</div>");
        });
    }
});