2016-04-01 8 views
-1

JSON文字列の操作に関する助けが必要です。 JSON文字列をJavaScriptオブジェクトに変換し、HTMLファイルを以下のようにします。 私が最初にやることは、使用でしたvar obj = JSON.parse(jsonstring); JSON文字列をJavaScriptオブジェクトに配置する。 その後、forループを使用してJavaScriptオブジェクトのすべての属性をトラバースし、 の値を使用してテーブルを作成します。 はしかし、私は.nameのを使用して代わりにその値のなど性別投票、名前、レースの名前を取得するために失敗し、。 ループ制御も誤動作しています。 .lengthは常に何らかの未定義エラーを返します。 ご提供いただけるご支援に感謝いたします。 あなたからのご意見をお待ちしております。JSON文字列をJavaScriptオブジェクトに変換してからHTMLテーブルを作成します

どのキャラクターがベストですか?

文字:StarWarsCharacters

録音番号:2

感覚:enter image description here


|投票|名前|レース|性別|


| 34411224 |オビ=ワン・ケノービ|人間|男性|


| 34458794 |アナキンスカイウォーカー|人間|男性|


は、ここで、ここでのコード

var obj = JSON.parse (jsonstring); 
 
var labelsName = obj.labels[0]; 
 
var sensesName = obj.senses[0]; 
 

 
createTable(obj) 
 

 
function createTable(obj) { 
 

 
    var table = document.createElement("table"); 
 

 
      table.setAttribute("width","100%"); 
 

 
      table.setAttribute("border","1"); 
 

 
      table.borderColor="#FFFFFF"; 
 

 
      table.cellSpacing="0"; 
 

 
      table.cellpadding="0"; 
 

 
      table.borderColorDark="#FFFFFF"; 
 

 
      table.borderColorLight="#AAAAAA"; 
 

 
      parentTd = document.getElementById("parentTd"); 
 

 
      //console.log(" parentTd=", parentTd); 
 

 
      parentTd.appendChild(table); 
 

 
      var header = table.createTHead(); 
 

 
      header.bgColor="#EEEEEE"; 
 

 
      var headerrow = header.insertRow(0); 
 

 
      headerrow.height="27"; 
 

 
    var labels = var.getElementsByTagName("labels"); 
 
    var senses = var.getElementsByTagName("senses"); 
 

 
for(var i = 0; i < obj.length; i++) { 
 
    var rowObj = obj[i]; 
 
    for(var key in rowObj){ 
 
     console.log(" key =: ", key); 
 
     console.log(" rowObj[key] =: ", rowObj[key]); 
 
    } 
 
}
<html> 
 
    
 
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> 
 

 
    <meta content="utf-8" http-equiv="encoding"> 
 
    <body> 
 

 
    <h1>Which Character Is The Best?</h1> 
 
    <div valign="top" id="parentTd">&nbsp;</div> 
 
    <script> 
 

 

 
var jsonstring = ' { "labels": [ ' + 
 
'{ "Characters": "StarWarsCharacters", "Record No.": 2, '+ 
 
' "Senses": [ { "vote": 34411224, "name": "Obi-Wan Kenobi", "race": "Human", "gender": "Male"}, ' + 
 
' { "vote": 34458794, "name": "Anakin Skywalker", "race": "Human", "gender": "Male"} ] } ] }' 
 

 
    </script> 
 
    </body> 
 

 
</html> 
 

+0

非常に多くのエラーが... 'var.getElementsByTagName'は、(varがキーワードである、あなたは' document'を使用する必要があります) 'obj.senses [0]' jsonにフィールド 'senses'がありません...objは配列ではないので、フィールド 'Senses'はルートオブジェクトのプロパティではなく、 'obj.length'は' undefined'です。ブラウザのJavaScriptデバッグコンソールを使用すると、そのようなエラーが表示されます!! !参照:http://ggnome.com/wiki/Using_The_Browser_Error_Console –

答えて

0

を入力してくださいあなたは何ができるかの例です:

for (var i = 0; i < json.labels.length; i++){ 
    for (var j = 0; j < json.labels[i].Senses.length; j++){ 
     document.getElementById('table').innerHTML += 
       '<tr><td>' + json.labels[i].Senses[j].gender + 
       '</td><td>' + json.labels[i].Senses[j].name + 
       '</td><td>' + json.labels[i].Senses[j].race + 
       '</td><td>'+ json.labels[i].Senses[j].vote + 
       '</td></tr>'; 
    }  
} 

たぶん、あなたが使用して動的にヘッダを追加してみてくださいすることができます:

の配列を返します
console.log(Object.keys(json.labels[0].Senses[0])); 

:このスクリプトで

[ "vote", "name", "race", "gender" ] 

Fiddle

関連する問題