Display Json from two nodes with Ajax - ajax

Question

I am having difficulty to display data from json. Title shows fine but item.volumeInfo.industryIdentifiers.type returns undefined.
$.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><div>" + item.volumeInfo.industryIdentifiers.type + "</div>");
});
}
});
Fiddle is here: http://jsfiddle.net/HFs8U/1/
Really appreciate your help.

Answer 1

You need to put [0] before .type as a volumeInfo can have two industryIdentifiers. Naturally this will only show the first one so you may need to find a more appropriate way of showing both if more than one exist.
$.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><div>" + item.volumeInfo.industryIdentifiers[0].type + "</div>");
});
}
});

Answer 2

The solutions wasn't very difficult. david99world suggested to do another $.each an loop through each item and pointed to a fiddle. I have slightly amended it and came up with:
$.ajax({
url: 'https://www.googleapis.com/books/v1/volumes?q=:isbn=0-13-727827-6',
dataType: 'json',
success: function (data) {
$.each(data.items, function (i, item) {
$(".tab1").append("<div>" + item.volumeInfo.title + "</div>");
$.each(item.volumeInfo.industryIdentifiers, function (i2, type) {
$(".tab1").append("<div>" + type.type + "</div>");
});
});
}
});
http://jsfiddle.net/8SnaL/
Hopefully it may be useful for some body else.