Question

我正试图弄清楚我正在使用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子对象的循环？

Answer 1

你仍然需要columnData：

columnData[col].ColumnId

Answer 2

这样做：

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字符串连接需求。

Answer 3

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循环遍历子对象

3 个答案: