Javascript，将 object 推入 for 循环导致重复值

Question

I have a problem to push objects inside another object inside a for loop. It result in having duplicated value. I assume the problem is about references :

var controllers = ["Patrick","Alain"];
var steval = {"name":null,"prix":{max: 5, min: 3},"comments":null};

var evals = [];
for (index = 0; index < controllers.length; ++index) {
      var name = controllers[index];
      var eval = steval;
      eval.name = name;
      console.log(eval);
      evals.push(eval);
}
console.log(evals);
$("#json").html(JSON.stringify(evals));

The result is the following:

[{"name":"Alain","prix":{"max":5,"min":3},"comments":null},{"name":"Alain","prix":{"max":5,"min":3},"comments":null}]

What I don't understand is that my console.log(eval) return the correct value but apparently evals.push(eval) always push the same value.

Answer 1

always push the same value

Because there is only a single object in your code: steval . All you do is change the name property of that one object.

If you want to create multiple objects then create the object inside the loop:

 var controllers = ["Patrick","Alain"]; var evals = []; for (index = 0; index < controllers.length; ++index) { var name = controllers[index]; var eval = {"name": name,"prix":{max: 5, min: 3},"comments":null}; evals.push(eval); } console.log(evals);

---

Slight more compact:

 var controllers = ["Patrick","Alain"]; var evals = controllers.map(name => { return {"name": name,"prix":{max: 5, min: 3},"comments":null}; }); console.log(evals);

Answer 2

As noted in the other answer (credit due), there's only one instance of steval which gets changed and pushed.

You can "clone" steval using jquery's $.extend (as tagged jquery) with deep set to true (as you have nested objects):

let eval = $.extend(true, {}, steval);

Alternatively, you could JSON stringify/parse to make a clone (or store the original as JSON to skip the stringify part) - but it's not ideal.

 var controllers = ["Patrick","Alain"]; var steval = {"name":null,"prix":{max: 5, min: 3},"comments":null}; var evals = []; for (index = 0; index < controllers.length; index++) { var name = controllers[index]; let eval = $.extend(true, {}, steval); eval.name = name; console.log(eval); evals.push(eval); } console.log(evals); //console.log(JSON.stringify(evals));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>