Question

几个小时以来，我一直在试图破解它，但我似乎无法成功。我正在尝试如下创建JSON字符串，但是当将变量obj的值传递给变量j时，我得到的只是该循环的最后结果的数组。

而不是得到诸如以下的结果

[{machine: "hi"...}
 {machine: "2"....}]

我得到：

[{machine: "2"...}
 {machine: "2"....
 and keep going with same value}]

我在做什么错了？

var return_json = function(){
    var j = [];
    var obj = {};
    var td;
    for(var i=1;i<tr.length;i++){
        td = tr[i].getElementsByTagName("td");
        obj['machine'] = td[0].innerHTML;
        console.log(obj['machine']);
        obj['day'] = td[1].getElementsByTagName("p")[0].innerHTML;
        obj['night'] = td[2].getElementsByTagName("p")[0].innerHTML;
        j.push(obj);
        console.log(j);
    }
    return j;
};

console.log(save_limitation());

Answer 1

在循环之前，您仅在obj变量中创建单个对象实例。在每次迭代中，您都更新对象的属性并将相同的对象推入数组。

要修复此问题，请在每次迭代时在循环中创建一个新对象。

var return_json = function() {
    var j = [];
    var td;
    for(var i = 1; i < tr.length; i++){
        td = tr[i].getElementsByTagName("td");
        j.push({
            machine: td[0].innerHTML,
            day: td[1].getElementsByTagName("p")[0].innerHTML,
            night: td[2].getElementsByTagName("p")[0].innerHTML
        });
    }
    return j;
};

Answer 2

由于obj是在循环外部定义的，因此您要在每个循环中向数组添加同一对象。您将在每次迭代中更新obj的属性。在循环内部定义obj，以确保您没有这样做。

var tr = document.getElementById("myTable").getElementsByTagName("tr");

var return_json = function(){
    var j = [];
    for(var i=1;i<tr.length;i++){
        var obj = {};
        var td = tr[i].getElementsByTagName("td");
        obj['machine'] = td[0].innerHTML;
        obj['day'] = td[1].getElementsByTagName("p")[0].innerHTML;
        obj['night'] = td[2].getElementsByTagName("p")[0].innerHTML;
        j.push(obj);
    }
    return j;
};

console.log(return_json());

<table id="myTable">
<tr><td>Machine</td><td>Day</td><td>Night</td></tr>
<tr><td>1</td><td><p>1d</p></td><td><p>1n</p></td></tr>
<tr><td>2</td><td><p>2d</p></td><td><p>2n</p></td></tr>
<tr><td>3</td><td><p>3d</p></td><td><p>3n</p></td></tr>
</table>

Answer 3

尝试在循环中为每个元素初始化td和obj：

var return_json = function(){
        var j = [];
        for(var i=1;i<tr.length;i++){
        var obj = {};
        var td;
            td = tr[i].getElementsByTagName("td");
            obj['machine'] = td[0].innerHTML;
            console.log(obj['machine']);
            obj['day'] = td[1].getElementsByTagName("p")[0].innerHTML;
            obj['night'] = td[2].getElementsByTagName("p")[0].innerHTML;
            j.push(obj);
            console.log(j);
        }
        return j;
    };

    console.log(save_limitation());

Answer 4

obj.machine是对td的引用。分配给td的链接后，您需要删除该链接。这应该可以解决。

for(var i=1;i<tr.length;i++){
    td = {};
    td = tr[i].getElementsByTagName("td");
    obj['machine'] = JSON.parse(JSON.stringify(td));
    console.log(obj['machine']);
    obj['day'] = td[1].getElementsByTagName("p")[0].innerHTML;
    obj['night'] = td[2].getElementsByTagName("p")[0].innerHTML;
    j.push(obj);
    console.log(j);
}

在循环内将对象推入数组中

4 个答案: