Add an array to array of objects in javascript

Question

I have two variables which is an array and array of object, I want to add the value of first variable(distance) to second variable(list)

The following works fine, but I want to know if there's any other method to get some result.

let distance = [100,200,300]
let list = [ {"city" : "paris"} , {"city" : "london"} , { "city" : "barcelona" }]
for(let i = 0; i < distance.length;i++){
 let listDistance = list.map(el => {
 return Object.assign({}, el, {distance:distance[i++]})
 return el
 });
console.log(listDistance) 
}
// output [ {city : paris , distance : 100 } , {city : london , distance : 200 } , { city : barcelona , distance : 300 }]

• adiga: You don't need for loop. Just use the second parameter index from map's callback
• Sebastian Kaczmarek: I'm voting to close this question as off-topic because it's "How can I improve my code" kind of question therefore, it's more suitable here: codereview.stackexchange.com.
• Deep Kakkar: make sure that you aware of the sync/async behavior of JS
• mplungjan: I made you a snippet. Your code does not work. You have a for loop AND a map and you console.log an unknown object. Anyway you have several answers now :)

Answer 1

Like this?

let distance = [100,200,300]
let list = [ {"city" : "paris"} , {"city" : "london"} , { "city" : "barcelona" }]
list.forEach((city,i) => city.distance = distance[i])
console.log(list)

Older browsers

let distance = [100,200,300]
let list = [ {"city" : "paris"} , {"city" : "london"} , { "city" : "barcelona" }]
list.forEach(function(city,i) { city.distance = distance[i] })
console.log(list)

If you need a new Array you can use map:

const distance = [100,200,300]
let list = [ {"city" : "paris"} , {"city" : "london"} , { "city" : "barcelona" }]
let distList = list.map((city,i) => ({ ...city, distance : distance[i]}) )
console.log(distList)

• Saurabh Agrawal: I like your second approach :)

Answer 2

Try this:

 let array1 = [100, 200, 300]
 let array2 = [{ "city": "paris" }, { "city": "london" }, { "city": "barcelona" }]
 let res = array2.map((value, index) => {
 return { ...value, distance: array1[index] }
 })
 console.log(res);

• Saurabh Agrawal: @mplungjan well can do it in both ways, So I preferred create new array instead of modifying existing one.
• Prashant Pimpale: (=>) arrow functions are not supported in IE <11!
• Saurabh Agrawal: There are some alternatives for the same, so coders will have to take care of it.

Answer 3

const listWithDistances = list.map(
 (item, index) => ({ ...item, distance: distance[index] })
)

This has the same result of your example of returning a new Array of new Objects.

Answer 4

Try this

for(let i = 0; i < distance.length; i++)
{
 list[i].distance = distance[i];
}