JSON循环遍历子对象答案

【问题标题】：JSON looping through sub objectsJSON循环遍历子对象
【发布时间】：2012-05-09 19:25:20
【问题描述】：

我正在尝试找出我在使用 JSON 和循环子对象时遇到的问题。我以前从未使用过 JSON，所以如果语法错误导致我的问题，请告诉我。

我已经定义了这个 JSON 对象：

var columnData = {
    "obj1":{Heading: "Test 1", Required: "True", DataTypeCode:"str", DropDownOptions: "", ColumnId: "1"},
    "obj2":{Heading: "Test 2", Required: "False", DataTypeCode:"dropdown", DropDownOptions: "Alpha,Beta,Gamma,Delta", ColumnId: "2"},
    "obj3":{Heading: "Test 3", Required: "True", DataTypeCode:"int", DropDownOptions: "", ColumnId: "3"}
};

我将它传递给执行此操作的函数：

for (var col in columnData) {
    r += '<td><input type="text" name="col' + col.ColumnId + '" value="' + col.Heading + '" /></td>'
}

FireBug 中的断点确认 columnData 是一个有效对象，它具有三个子对象，并且子对象具有预期的属性和值。但这是调用函数后我得到的输出：

<td><input name="colundefined" value="undefined" type="text"></td>

不幸的是，我认为我缺乏使用 JSON 的经验导致我试图追踪答案的结果无法使用。如何编写一个循环来正确获取 columnData 的子对象？

【问题讨论】：

嗯，看起来像一个对象字面量。 JSON 在哪里？
是吗？我想我对 JSON 和 Javascript 对象的了解还不够，无法知道它们之间的区别。我从其他一些 JSON 问题中得到了语法。无论哪种方式，只要它有效，我真的不在乎它在技术上是否是 JSON。
对于 JavaScript，JSON 从外部 .json 文件（来自服务器）作为字符串检索，然后通过 JSON.parse 解析为 JavaScript 对象。另一方面，当您拥有var obj = { ... }; 时，那是一个对象字面量，与 JSON 无关。
for...in 的工作原理在 MDN 文档中进行了说明：developer.mozilla.org/en/JavaScript/Reference/Statements/…

标签： javascript json iteration

【解决方案1】：

你仍然需要 columnData：

columnData[col].ColumnId

【讨论】：

【解决方案2】：

JSON 要求键值用双引号括起来，您的 columnData 变量是 javascript 对象，而不是 JSON。

话虽如此，col 是 columnData 中被迭代的当前键，例如obj1，obj2，obj3。如果您想访问其中一个对象的属性，您需要先访问它：

var col;
for (var key in columnData) {
    col = columnData[key];
    r += '<td><input type="text" name="col' + col.ColumnId + '" value="' + col.Heading + '" /></td>'
}

【讨论】：

谢谢。我想我当时没有使用 JSON 吗？无论哪种方式，它现在都在工作。
@William 正确，JSON 和 javascript 对象经常混淆。 JSON 是一种以字符串形式存在的数据传输语言，而 javascript 对象则是 javascript 对象 :)
好的，那么 JSON 是一个可以解析为对象的字符串？我懂了。你每天都会学到新东西。
@William 如果您使用 jQuery，您可能还需要考虑使用 DOM 构造函数来构建 HTML，而不是字符串连接。
您有快速参考的链接吗？我只真正将 Jquery 用于非常简单的事情，所以我不知道它是如何工作的。

【解决方案3】：

这样做：

var key;
var col;

for ( key in columnData ) {
    col = columnData[ key ];
    r += '<td><input type="text" name="col' + col.ColumnId + '" value="' + col.Heading + '" /></td>';
}

另一种选择：

r += Object.keys( columnData ).map( function ( key ) {
    var col = columnData[ key ];
    return '<td><input type="text" name="col' + col.ColumnId + '" value="' + col.Heading + '" /></td>';
}).join( '' );

我还推荐一个模板引擎（如 Handlebars.js）来满足您的 HTML 字符串连接需求。

【讨论】：