JSON 循环遍历子对象

JSON looping through sub objects

本文关键字：对象 遍历 循环 JSON      更新时间：2023-09-26

我试图找出我在 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[col].ColumnId

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>'
}

这样做：

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

相关文章：