將 JSON 字符串轉換為 JavaScript 對象，然后創建一個 HTML 表

Question

我需要一些有關 JSON 字符串操作的幫助。 我想做的是將 JSON 字符串轉換為 JavaScript 對象並使 HTML 文件如下所示。 我做的第一件事是使用var obj = JSON.parse ( jsonstring ); 將 JSON 字符串放入 JavaScript 對象。 之后，我希望使用 for 循環遍歷 JavaScript 對象中的所有屬性，然后使用該值創建表。 但是，我無法通過使用.name獲取投票、姓名、種族和性別等名稱而不是其值。 回路控制也出現故障。 .length總是返回一些未定義的錯誤。 如果您能提供任何幫助，我將不勝感激。 期待您的回音。

哪個角色最好看？

角色：星球大戰角色

記錄編號：2

感官：在此處輸入圖像描述

| 投票 | 姓名 | 種族| 性別 |

| 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>

Answer 1

這是您可以執行的操作的示例：

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" ]

小提琴

將 JSON 字符串轉換為 JavaScript 對象，然后創建一個 HTML 表

問題描述

1 個解決方案

解決方案1
0 已采納 2016-04-01 09:41:26

將 JSON 字符串轉換為 JavaScript 對象，然后創建一個 HTML 表

問題描述

1 個解決方案

解決方案1 0 已采納 2016-04-01 09:41:26

解決方案1
0 已采納 2016-04-01 09:41:26