JSON：ディープレベル配列へのアクセス方法

Question

すべてのプリループは問題ありません。私は、より深いレベルのjsonにアクセスする方法を見つけるのを助ける必要があります。私は "for"ループで立ち往生しています。 product_nameは最初のループで大丈夫ですが、それより深いものではありません。より深いレベルのループごとにいくつか出力を追加しましたが、私は2番目のレベルをパスしていないようです。

Follow URL JSON配列を表示します。

<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

2番目のループは無効です。リンク内のデータごとに、product.tabsは配列ではありません。そのオブジェクト。実際にはループすることはできません。オブジェクトには、そのオブジェクトを処理するための別の方法が必要です。

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; 

     } 
    } 
}