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>

Answer 2

您不需要致电JSON.stringify()，您的回复已经是JSON字符串。

相反，请执行以下操作：

var obj = JSON.parse(http_request.responseText);

输出JSON键，JavaScript中的值

2 个答案: