循环到 Javascript 对象并显示在表格中答案

【问题标题】：Loop into Javascript object and show in table循环到 Javascript 对象并显示在表格中
【发布时间】：2013-04-01 00:26:16
【问题描述】：

我正在使用 JavaScript JSON 对象。我不确定这是编写 JSON 对象的正确方法：-

var address={
    details:{
        "martin":[{"full_name":"James Martin"},{"address":"Florida"},{"phone":"897657834"}],
        "luthar":[{"full_name":"Luther king"},{"address":"Boston"},{"phone":"9856568789"}],
        "jonson":[{"full_name":"Jonson vierra"},{"address":"New york"},{"phone":"98654567887"}]
    }
}

现在，我想在表格中显示每个人的每个元素。我可以通过编写手动执行此操作：

<table border=1>
<tr>
<td><script>document.write(address.details.martin[0].full_name)</script></td>
<td><script>document.write(address.details.martin[1].address)</script></td>
<td><script>document.write(address.details.martin[2].phone)</script></td>
</tr>
</table>

对所有 3 个人都这样，但我想通过使用循环来获取每个人的全部详细信息。如何使用循环轻松做到这一点？

【问题讨论】：

您可能想考虑使用像 knockout 这样的绑定库来完成类似的事情。
实际上我现在不想使用任何类型的库。因为我是 javascirpt 的新手，所以我需要从 root 知道。 :)
很公平，但是使用库和学习 JavaScript 并不是相互排斥的。也不要养成像这样内联 JavaScript 的坏习惯。最后，你所拥有的实际上不是有效的 JSON，因为 details 没有用引号括起来，但不清楚为什么你想要 JSON 而不仅仅是对象文字。
JSON 通常很容易使用。它可以在数组内的数组内创建数组......所以很容易装饰和调用。
显然不是那么容易，因为您的 JSON 无效，而且 exactly 对象文字也是如此。它实际上几乎完全相同，只是您不需要将属性名称括在引号中。

标签： javascript html loops html-table

【解决方案1】：

for (var personName in address.details) {
  if (address.details.hasOwnProperty(personName)) {
    address.details[personName]
    //  [{"full_name":"James Martin"},{"address":"Florida"},{"phone":"897657834"}]
    // you could now loop through the personName's array
  }
}

你对数据结构有控制权吗？好像有点绕？

【讨论】：

实际上我不想要一个人的完整数据（包括`括号或"`。我只需要诸如martins full_name `James martin 表格中的数据。

【解决方案2】：

我会按照这些思路做一些事情：

for (var i in address.details)
{
    document.write('<tr><td>' + address.details[i][0]['full_name'] + '</td><td>' + address.details[i][1]['address'] + '</td><td>' + address.details[i][2]['phone'] + '</td></tr>');
}

要跟进此代码，应输出包含所需数据的表格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>An XHTML 1.0 Strict standard template</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>

<body>
    <script>
    var address={
        details:{
        "martin":[{"full_name":"James Martin"},{"address":"Florida"},{"phone":"897657834"}],
        "luthar":[{"full_name":"Luther king"},{"address":"Boston"},{"phone":"9856568789"}],
        "jonson":[{"full_name":"Jonson vierra"},{"address":"New york"},{"phone":"98654567887"}]
        }
    }
    </script>
    <table border=1>
    <script>
        for (var i in address.details)
        {
            document.write('<tr><td>' + address.details[i][0]['full_name'] + '</td><td>' + address.details[i][1]['address'] + '</td><td>' + address.details[i][2]['phone'] + '</td></tr>');
        }
    </script>
    </table>
</body>

【讨论】：

我相信address.details[i] 是一个数组
对不起，代码匆忙，总是很糟糕，我现在已经编辑了。应该工作。
我相信 Rodrigo 对您的情况有更好的答案。另外我不明白你为什么将脚本标签放在表格单元格中，这是不必要的
@AlvinC 确实是一个很好的简短答案。好的！但如果我尝试输入整个表。我的意思是包括<table></table> 标签。它不是写作。注意：我在循环之外写了<table> 标签。
@slash-bang 我已经编辑了答案，向您展示了您需要的确切脚本。如果可能的话，我建议更改 JSON。