如何将数字数组映射到对象数组中的属性？

Question

I am trying to map an array of values to a property in an array of objects.

var myArray = ['2', '4', '7'];

var myProducts = [
  {id: '755', price: '10'}, 
  {id: '756', price: '20'}, 
  {id: '757', price: '30'}
];

Please note that the length of myArray will always equal the number of objects in myProducts .

My first thought was to loop through objects in myProducts , and then mapping myArray to the shipping property inside that loop:

myProducts.forEach(function(obj) {
  obj.shipping = Array.prototype.map(myArray);
});

But this isn't working, and I am also now questioning whether I should be using .map within the forEach loop. What's the best way to do this?

Desired result :

var myProducts = [
  {id: '755', price: '10', shipping: '2'}, 
  {id: '756', price: '20', shipping: '4'}, 
  {id: '757', price: '30', shipping: '7'}
];

Answer 1

You could take the index and assign the value to the property

 var myArray = ['2', '4', '7'], myProducts = [{ id: '755', price: '10' }, { id: '756', price: '20' }, { id: '757', price: '30' }]; myProducts.forEach((o, i) => o.shipping = myArray[i]); console.log(myProducts); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

One way is to use the second argument of .forEach( 's callback, which gives you the index of the iterator:

 var myArray = ["2", "4", "7"]; var myProducts = [ { id: "755", price: "10" }, { id: "756", price: "20" }, { id: "757", price: "30" } ]; myProducts.forEach(function(obj, index) { obj.shipping = myArray[index]; }); console.log(myProducts); 

Answer 3

Just use a regular for loop, because you need to keep track of the index.

 var myArray = ['2', '4', '7']; var myProducts = [ {id: '755', price: '10'}, {id: '756', price: '20'}, {id: '757', price: '30'} ]; for (var i = 0; i < myProducts.length; i++) { myProducts[i].shipping = myArray[i]; } console.log(myProducts); 

Answer 4

It depends on whether you want to mutate that object specifically or if you don't mind creating a new object

Creating a new object

newProducts = myProducts.map((product, index ) => {
    product['shipping'] = myArray[index];
    return product;
})

Mutating existing object

myArray.forEach((item, index) => {
    myProducts[index]['shipping'] = item;
});

Creating a new item is useful if you are doing this in a function and don't want to mangle the products array in its original location before you called this since objects are passed by reference.

Answer 5

Use index based for each loop iterator

var myArray = ['2', '4', '7'];

var myProducts = [
{ id: '755', price: '10' },
{ id: '756', price: '20' },
{ id: '757', price: '30' },
];

myProducts.forEach(function(obj, index) {
 obj.shipping = myArray[index];
});