javascript - 在 JavaScript 中输出 JSON 键、值

Question

我有一个包含以下格式内容的 json 文件:

{
  "Florida":{
   "4079823456" : "Text message content 1 here",
   "4079323457" : "Text message content 2 here",
   "4079823458" : "Text message content 3 here"
},

"Texas":{
   "2149823456" : "Text message content 1 here",
   "2149323457" : "Text message content 2 here",
   "2149823458" : "Text message content 3 here"
}

}

我使用 javascript(无库)将 json 文件中的键/值对输出到 html 表，以获得如下输出:

Phone Number | Text Message
4079823456   | Text message content 1 here
4079323457   | Text message content 2 here

但是，我得到的是这样的结果:

  Phone Number | Text Message
      0            {
      1            "

以下是我的 JavaScript 代码片段:

var str = JSON.stringify(http_request.responseText);
var obj = JSON.parse(str);
var rowContent;

var tablerows = document.getElementById("tablerow");

for(var key in obj){
   rowContent = "<tr><td>" + key + "</td><td>" + obj[key] + "</td></tr>";

   tablerows.innerHTML += rowContent;
}

如何获取要输出到所需输出的键值对，而不是获取 JSON 文件中的每个单独字符？理想情况下，我想循环遍历键和值(在我的例子中，是电话号码和短信)，因为实际上有数百个。

提前致谢。

Answer 1

对于您的数据，您可以使用两个for...in循环并添加到table。另外，最好创建包含表格内容的字符串，并在循环完成后添加它。

var data = {
  "Florida": {
    "4079823456": "Text message content 1 here",
    "4079323457": "Text message content 2 here",
    "4079823458": "Text message content 3 here"
  },
  "Texas": {
    "2149823456": "Text message content 1 here",
    "2149323457": "Text message content 2 here",
    "2149823458": "Text message content 3 here"
  }
}

var table = document.querySelector('table');
var rows = '';
for (var p in data) {
  for (var k in data[p]) {
    rows += '<tr><td>' + k + '</td><td>' + data[p][k] + '</td></tr>'
  }
}
table.innerHTML = rows;

<table></table>