Javascript 通过子对象循环的JSON

我试图找出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>'
}

for（列数据中的变量列）{
r+=''
}

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

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

---

不幸的是，我认为我缺乏使用JSON的经验，这使得我试图找到答案的结果无法使用。如何编写能够正确获取columnData子对象的循环？

您仍然需要columnData：

columnData[col].ColumnId

---

您仍然需要列数据：

columnData[col].ColumnId

这样做：

var key;
var col;

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

var键；
var-col；
用于（输入列数据）{
col=列数据[键]；
r+=''；
}

---

另一种选择：

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( '' );

r+=Object.keys（columnData）.map（function（key）{
var col=列数据[键]；
返回“”；
}).加入（“”）；

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

这样做：

var key;
var col;

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

var键；
var-col；
用于（输入列数据）{
col=列数据[键]；
r+=''；
}

---

另一种选择：

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( '' );

r+=Object.keys（columnData）.map（function（key）{
var col=列数据[键]；
返回“”；
}).加入（“”）；

---

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

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-col；
for（列数据中的变量键）{
col=列数据[键]；
r+=''
}

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-col；
for（列数据中的变量键）{
col=列数据[键]；
r+=''
}

Hm，看起来像一个对象文字。JSON在哪里？是吗？我想我对JSON和Javascript对象的了解还不够，不知道它们之间的区别。我从另一个JSON问题中得到了语法。无论哪种方式，只要它能工作，我都不在乎它在技术上是否是JSON。至于JavaScript，JSON是从外部

.JSON

文件（从服务器）检索为字符串，然后通过

JSON.parse

解析为JavaScript对象。另一方面，当您有

var obj={…}

，这是一个对象文字，与JSON无关。MDN文档中解释了中…的的工作原理：Hm，看起来像一个对象文字。JSON在哪里？是吗？我想我对JSON和Javascript对象的了解还不够，不知道它们之间的区别。我从另一个JSON问题中得到了语法。无论哪种方式，只要它能工作，我都不在乎它在技术上是否是JSON。至于JavaScript，JSON是从外部

.JSON

文件（从服务器）检索为字符串，然后通过

JSON.parse

解析为JavaScript对象。另一方面，当您有

var obj={…}

，这是一个对象文字，与JSON无关。MDN文档中解释了中…的工作原理：谢谢。我想我没有使用JSON吧？不管是哪种方式，它现在都可以工作了。@William correct，JSON和javascript对象经常混淆。JSON是一种以字符串形式存在的数据传输语言，而javascript对象是javascript对象：）那么JSON是一种可以解析为对象的字符串吗？我懂了。你每天都会学到一些新的东西。@威廉，如果你使用jQuery，你可能也想考虑使用DOM构建函数来构建HTML而不是字符串连接。你有一个指向快速引用的链接吗？我只在非常简单的事情上使用Jquery，所以我不知道它是如何工作的。谢谢。我想我没有使用JSON吧？不管是哪种方式，它现在都可以工作了。@William correct，JSON和javascript对象经常混淆。JSON是一种以字符串形式存在的数据传输语言，而javascript对象是javascript对象：）那么JSON是一种可以解析为对象的字符串吗？我懂了。你每天都会学到一些新的东西。@威廉，如果你使用jQuery，你可能也想考虑使用DOM构建函数来构建HTML而不是字符串连接。你有一个指向快速引用的链接吗？我只在非常简单的事情上使用Jquery，所以我不知道它是如何工作的。