For loop always uses the last value JavaScript - VueJS

Question

as the title describes the problem, I'm using a for loop to extract elements of an array and asign it to a JSON value, it´s something like this:

hotel={ rooms: 2, price: [ 100, 200 ], occupation: [ '1 child', '1 adult' ]

and want to push into an array of JSON

hotels = [ { rooms:1, price: 100, occupation: '1 child' },... ]

so i tried this:

var json = { rooms : 1, price:null, occupation:null }    
for (let i=0 ; i < hotel.rooms ; i++){
    json.price = hotel.price[i]
    json.occupation = hotel.occupation[i]
    this.hotels.push(json)
}

but always the array hotels has the last values of the loop and (shows repeated the last value of the iteration), tried using the try {throw i} catch(ii) {...} but doesnt work

Robin Zigmond · Accepted Answer · 2020-07-30 06:05:42Z

1

The problem is that each element of the array this.hotels is a reference to the same json object - so when it is mutated, anywhere, all those array elements "see" the change. Since you mutate json in each loop iteration, and simply overwrite the same keys, it's inevitable that each element ends up the same.

To fix it, simply push a new "copy" of the object - which will not therefore be affected by mutations of the "master" json object. There are several ways to do this, one being object spread notation:

this.hotels.push({...json});

You could also use Object.assign({}, json) instead of the spread notation. Or keep your code as it was, but move the var json = {...} inside the loop while replacing var with let - to ensure it's a new local variable each time, rather than one global that's continually mutated. Lots of solutions, as I said.

edited Jul 30, 2020 at 6:05

answered Jul 29, 2020 at 22:04

Robin Zigmond

18.3k2 gold badges25 silver badges38 bronze badges

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

Comments

Jinal Somaiya · Accepted Answer · 2020-07-30 08:12:55Z

1

Object are reference types, you need to create a new object each time you push to the hotels array.

There are several ways to fix this two simple ways would be to:

Use object literals in the push method this.hotel.push({ rooms: 1, price: hotel.price[i], occupation: hotel.occupation[i]})

--OR--

Move the variable declaration into your loop var json = { rooms : 1, price:null, occupation:null }

edited Jul 30, 2020 at 8:12

Jinal Somaiya

1,99117 silver badges31 bronze badges

answered Jul 29, 2020 at 22:13

Alex

111 bronze badge

2 Comments

Robin Zigmond Over a year ago

As mentioned in my answer, just moving that line inside the loop won't fix this, unless the var is replaced by let. Only that way will the variable be scoped to the loop body, with var it will still be global.

YaelR Over a year ago

Thanks, both of you gave me the solution, I changed the var for let and moved json inside the loop and works fine.

Collectives™ on Stack Overflow

For loop always uses the last value JavaScript - VueJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related