Pushing an object in an array inside a loop [duplicate]

问题

For few hours now I been trying to hack this but I really cant seem to succeed. I am trying to create a JSON string as below, but when passing the values of the variable obj to variable j I am getting an array of only the last result of that loop.

instead of getting results such as:

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

I am getting:

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

What am I doing wrong?

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

回答1:

You're only creating a single object instance in obj variable before the loop. In every iteration, you update the properties of the object and push the same object into your array.

To fix it, create a new object within your loop at every iteration.

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

回答2:

Try initalise the td and obj inside the loop for every element:

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

回答3:

obj.machine is a reference to td. You need to remove the link to the td once it is assigned. This should solve it.

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:

Because obj is defined outside of the loop you are adding the same object to the array each loop. You are updating the properties of obj on every iteration. Define obj inside of the loop to ensure you are not doing this.

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>

来源：https://stackoverflow.com/questions/50966069/pushing-an-object-in-an-array-inside-a-loop

标签

javascript

json