Question 225162 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – iterate array and populate with json data

I have the folowing code

seriesTitles = ['depth','incline']    
    
var aSeries =  {name: '',data: [{}]}

var seriesArray  = []

    seriesTitles.forEach(element => { // outer loop}
    aSeries.name = element;
    seriesArray.push(aSeries)    

})
      console.log(seriesArray)

But something is wrong. It seems to add the last item in the seriesTitles array twice!
The output I get is..

{"name": "incline","data": [{}]}

{"name": "incline","data": [{}]}

When I run the code I would expect to see..

{"name": "depth","data": [{}]}

{"name": "incline","data": [{}]}

I am new to javascript and am thrown by this. Can anyone please point out where I am going wrong?

Tags:

3

Answers


  1. 0

    This is because, the object literals in JavaScript are reference variables, and you are pushing the exact same object to the array. So, its like pushing the same address of the object multiple times. So, whenever you make any change somewhere, the whole array seems to change because all the objects are same. You can read more about it here https://academind.com/tutorials/reference-vs-primitive-values

    You can create a copy of the object and then make changes to the properties and then push it to the array. You can use destructuring to make a copy.

    seriesTitles = ['depth', 'incline'];

var aSeries = { name: '', data: [{}] };

var seriesArray = [];

seriesTitles.forEach((element) => {
  aSeries.name = element;
  seriesArray.push({...aSeries});
});
console.log(seriesArray);
    Login or Signup to reply.
  2. 0

    You are adding the aSeries twice, and happen to modify the name. If you want different aSeries objects, then either make a copy or change the scope and create it inside of the forEach.

    You could make a copy using the spread operator:

    seriesTitles = ['depth','incline']      
const seriesArray  = []
const aSeries = {name: '',data: [{}]};
seriesTitles.forEach(element => { // outer loop
  aSeries.name = element;
  seriesArray.push({...aSeries});    
})
console.log(seriesArray)

    Or just move the declaration of the aSeries variable inside of the for loop, so that you instantiate a new one each time.

    seriesTitles = ['depth','incline']      
const seriesArray  = []

seriesTitles.forEach(element => { // outer loop
  const aSeries =  {name: '',data: [{}]}
  aSeries.name = element;
  seriesArray.push(aSeries);    
})
console.log(seriesArray)
    Login or Signup to reply.
  3. 0

    Here is the working example:

    let seriesTitles = ["depth", "incline"];

let seriesArray = [];

seriesTitles.forEach((element) => {
  // for every iteration  create new object
  let aSeries = { name: "", data: [{}] };
  aSeries.name = element;
  seriesArray.push(aSeries);
});

//
console.log(seriesArray);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search