Using Javascript how do I add an array that is an argument for a function/method to an array of objects?

Question

I am attempting to match an array being passed through as arguments to a Javascript class method to an array of objects that are also being created within the method.

For example, here's an array being passed:


colorSet = ["red","orange","purple","yellow"]

When this array is passed in the below method called addColors, I need to create an object and push the object to an empty array based on the length of the colorSet. This is simple enough.

 addColors(colorSet) {
  let obj = {}
  for (let i = 0;i<colorSet.length;i++){
   this.legend.push(obj)
  }

However, after doing this, I attempted within the same for loop to add object key 'color' to the array of objects and set its value to the array of colors in colorSet. See below:

 addColors(colorSet) {
  let obj = {}
  for (let i = 0;i<colorSet.length;i++){
    this.legend.push(obj)
    this.legend[i].color = colorSet[i]
  }

However, here is the result:

0: Object { color: "yellow" }

1: Object { color: "yellow" }

2: Object { color: "yellow" }

3: Object { color: "yellow" }

What I want is this:


0: Object { color: "red" }

1: Object { color: "orange" }

2: Object { color: "purple" }

3: Object { color: "yellow" }

Any help on this would be greatly appreciated.

Robin Zigmond · Accepted Answer · 2020-10-13 19:05:07Z

2

This is a common problem. You're mutating the object legend[i] - but this, for all indices i, is a reference to the same object obj, with the result that mutating any one changes them all.

The solution: simply push a brand new object each time, without mutating anything:

addColors(colorSet) {
  for (let i = 0;i<colorSet.length;i++){
    this.legend.push({ color: colorSet[i]});
  }
}

In fact, you could simplify this by removing the loop and just using the map method and rest parameters:

addColors(colorSet) {
  this.legend.push(...colorSet.map(color => ({ color })))
}

answered Oct 13, 2020 at 19:05

Robin Zigmond

18.3k2 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rguttersohn Over a year ago

This worked great. But I found out I have to use this solution with a method that comes before this one. So now I have an object that looks like this: 0: Object { indicator: "first datapoint" } 1: Object { indicator: "second datapoint" } 2: Object { indicator: "third datapoint" } 3: Object { indicator: "fourth datapoint" } So I have to add the array of colors to this, but I am running into the same issue where only the last color in the array is being added to the object. Here is where I'm stuck: this.legend.map(o=>colorSet.forEach(color=>{ o.color = color }) )

rguttersohn Over a year ago

Just figured it out using a for loop: for (let i =0;i<colorSet.length;i++){ this.legend[i].color = colorSet[i] }

Dipen Shah · Accepted Answer · 2020-10-13 19:04:02Z

1

Problem is you have let obj = {}; line which is out side for loop and same object is being referred by all items that are pushed to legend. Move it inside for loop to fix this issue:

var legend = [];

function addColors(colorSet) {
  for (let i = 0; i < colorSet.length; i++) {
    let obj = {}; // <- new object should be defined here
    legend.push(obj);
    legend[i].color = colorSet[i];
  }
}

addColors(["red", "orange", "purple", "yellow"]);
console.log(legend);

answered Oct 13, 2020 at 19:04

Dipen Shah

26.2k1 gold badge37 silver badges61 bronze badges

Comments

Derek Wang · Accepted Answer · 2020-10-13 19:03:33Z

0

On addColors, the problem is you are pushing obj variable on for loop. On legend.push(obj), it pushes the reference of obj variable, not the value of obj so all variables are set as last-index value.

const colorSet = ["red", "orange", "purple", "yellow"];

function addColors(colorSet) {
  const legend = [];
  for (let i = 0;i< colorSet.length; i++) {
    legend.push({}); // - Here, instead of pushing `obj`, push initial value `{}`
    legend[i].color = colorSet[i];
  }
  
  console.log(legend);
}

addColors(colorSet);

Simply, this can be done using Array.prototype.map

const colorSet = ["red","orange","purple","yellow"];

const result = colorSet.map((item) => ({ color: item }));
console.log(result);

answered Oct 13, 2020 at 19:03

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Comments

screech · Accepted Answer · 2020-10-13 19:05:45Z

0

You can directly create the object in the loop.

Link this.

function addColors(colorSet) {
  const legends = [];
  for (let i = 0;i<colorSet.length;i++){
  const obj = {
    color: colorSet[i]
  }
   legends.push(obj)
  }
  
  console.log(legends)
  
 }

const colorSet = ["red","orange","purple","yellow"];


addColors(colorSet);

answered Oct 13, 2020 at 19:05

screech

715 bronze badges

Collectives™ on Stack Overflow

Using Javascript how do I add an array that is an argument for a function/method to an array of objects?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related