JSON: How to access deep level array - arrays

Question

Everything pre-loop is fine. I need help finding the way to access deeper level json. I'm stuck in the "for" loop. The product_name comes out okay in the first loop but nothing deeper than that. I've added some output for each deeper level loop but I don't seem to pass the second one.
Follow URL to view JSON array.
<script>
var xmlhttp = new XMLHttpRequest();
var url = 'http://www.weber.se/?type=88&pageAlias=lecareglttklinker26&json=1';
xmlhttp.onreadystatechange=function() {
if (this.readyState == 4 && this.status == 200) {
readJson(this.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function readJson(response) {
var object = JSON.parse(response);
var output = '<div class="container-fluid">';
output += '<div class="row">';
output += '<div class="col-xs-6 text-left"><img src="' + object.product[0].packaging_picture + '" height="230"></div>';
output += '<div class="col-xs-6 text-right"><img src="' + object.product[0].main_picture + '" height="230"></div>';
output += '</div>';
output += '<div class="row">';
output += '<div>' + object.product[0].standfirst + '</div>';
output += '</div>';
output += '<div class="row">';
output += '<div class="well"><h2>Egenskaper</h2>' + object.product[0].benefits_description + '</div>';
output += '</div>';
for (var a = 0; a < object.product.length; a++) {
var product = object.product[a];
var name = product.product_name;
output += '<h2>' + name + '</h2>';
for (var b = 0; b < product.tabs.length; b++) {
var tabs = product.tabs[b];
output += 'tabs<br>';
for (var c = 0; c < product.tabs.tab.length; c++) {
var tab = tabs.tab[c];
output += 'tab<br>';
for (var d = 0; d < product.tabs.tab.contents.length; d++) {
var contents = tab.contents[d];
output += 'contents<br>';
for (var e = 0; e < product.tabs.tab.contents.content.length; e++) {
var content = contents.content[e];
output += 'content<br>';
for (var f = 0; f < product.tabs.tab.contents.content.title.length; f++) {
var title = content.title[f];
var bodytext = content.bodytext[f];
output += '<h3>' + title + '</h3>';
output += bodytext;
}
}
}
}
}
}
output += '</div>';
document.getElementById("output").innerHTML = output;
}
</script>

Answer 1

Your second loop is not valid. as per the data in the link, product.tabs is not an array. its an object. so you can't really loop and object you need to have a different way to process that object.
for (var a = 0; a < object.product.length; a++) {
var product = object.product[a];
var name = product.product_name;
output += '<h2>' + name + '</h2>';
output += 'tabs<br>';
var tabs = product['tabs']['tab'];
for (var c = 0; c < tabs.length; c++) {
var tab = tabs[c];
output += 'tab<br>';
var contents = tab['contents'] != undefined ? tab['contents']['content'] : [];
output += 'contents<br>';
for (var e = 0; e < contents.length; e++) {
var content = contents[e];
output += 'content<br>';
var title = content.title;
var bodytext = content.bodytext;
output += '<h3>' + title + '</h3>';
output += bodytext;
}
}
}