Question

我正在尝试遍历许多项目，并创建一个json对象。每个循环应该是对象上的一个新项目，但我遇到了一些问题。似乎只添加了一组项目，而不是多项。

这是我的代码：

jsonObj = {}
rows.each(function (index) {
    jsonObj["id"] = $this.find('.elementOne').val();
    jsonObj["name"] = $this.find('.elementTwo').text();

});

这是我的json的样子：

{
    id: "3"
    name: "Stuff"
},

以下是我要做的事情：

{
    id: "1"
    name: "Stuff"
},
{
    id: "2"
    name: "Stuff"
},
{
    id: "3"
    name: "Stuff"
}

Answer 1

这里没有JSON。请不要混淆：

JavaScript对象（数据结构）
JavaScript对象文字（用于创建此类数据结构的代码）
JSON（基于对象文字表示法子集的数据格式）

如果您需要有序的对象列表（或任何其他类型的JavaScript数据结构），请使用数组。数组有push方法。

var myData = [];
rows.each(function (index) {
    var obj = { 
        id: $this.find('.elementOne').val(),
        name: $this.find('.elementTwo').text()
    };
    myData.push(obj);
});

Answer 2

您可以覆盖对象，而不是每次迭代都添加一个新值。

使用数组

修复代码：

jsonObj = [];
rows.each(function(index) {
    jsonObj.push({
        'id': $this.find('.elementOne').val(),
        'name': $this.find('.elementTwo').text()
    });
});

Answer 3

你想要的是一个对象数组。当您尝试多次在同一个对象上写入相同的属性时，它会被覆盖，这就是为什么您看到id和name包含循环最后一次迭代的值。

虽然你没有用jQuery标记这个问题，但它确实看起来像jQuery，所以这是一个解决方案：

我冒昧地将$this更改为this，因为$this似乎是指每次迭代中的同一个对象，现在就是你想要的（methinks）

var myArray = rows.map(function() {
    return {
        id: $(this).find('.elementOne').val(),
        name: $(this).find('.elementTwo').text()
    };
});

Answer 4

这是因为您每次只是覆盖对象的相同属性id和name。您需要为每个子对象创建一个子对象，然后将其推入主对象（我已转换为数组，因为它是非关联的）。

var jsonObj = []
rows.each(function (index) {
    var temp_obj = {};
    temp_obj["id"] = $this.find('.elementOne').val();
    temp_obj["name"] = $this.find('.elementTwo').text();
    jsonObj.push(temp_obj);
});

[编辑] - 正如Mark Eirich的回答所示，temp_obj是不必要的 - 你可以推送一个匿名对象，但我定义temp_obj只是为了清楚地说明发生了什么。

另请阅读Quentin非常好的观点：JavaScript对象与JSON之间常见的混淆。

Answer 5

你可以用jquery这样做。该函数将期望输入类型的表单元素。它将迭代到传递的表单将收集每个输入的名称和值，它将创建一个像

的json对象

Exmple：

HTML

<form action="" method="post" id="myForm">
    <input type="text" name="field1" value="I a value of field 1"/>
    <input type="text" name="field2" value="I a value of field 2"/>
</form>

Javascript

function buildObject(form) {
            var jsonObject = [],
                tempObj = {};
            $(form).find("input:not(input[type='submit'])").each(function() {
                tempObj[$(this).attr("name")] = $(this).val();
            });

            jsonObject.push(tempObj);

            return jsonObject[0];
    }
    buildObject($("#myForm"));
    //Will produce

     jsonObj = {
        field1 : "I a value of field 1",
        field2 : "I am value of field 2"    
    }

Answer 6

var jsonObj = [];
rows.each(function(index) {
    jsonObj.push({
        id: $this.find('.elementOne').val(),
        name: $this.find('.elementTwo').text()
    });
});

如何用循环构建一个json对象？

6 个答案: