How do I map an array of numbers to a property in an array of objects?

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'}
];

Nina Scholz · Accepted Answer · 2018-04-25 21:15:53Z

2

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; }

answered Apr 25, 2018 at 21:15

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

4 Comments

ryanpcmcquen Over a year ago

Duplicate of my answer. ES6-y though.

Muhammad Usman Over a year ago

@ryanpcmcquen, com'on you don't wanna say this.

ryanpcmcquen Over a year ago

@GeorgeBailey, why?

ryanpcmcquen Over a year ago

True, but it was one minute later ... and uses the same .forEach idea.

pushkin · Accepted Answer · 2018-04-25 21:18:34Z

1

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);

edited Apr 25, 2018 at 21:18

answered Apr 25, 2018 at 21:15

pushkin

10.4k16 gold badges65 silver badges112 bronze badges

2 Comments

ryanpcmcquen Over a year ago

Native methods are preferred over for loops.

pushkin Over a year ago

@ryanpcmcquen Why is that?

ryanpcmcquen · Accepted Answer · 2018-04-25 21:28:26Z

1

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);

edited Apr 25, 2018 at 21:28

answered Apr 25, 2018 at 21:15

ryanpcmcquen

6,5134 gold badges26 silver badges38 bronze badges

Comments

BossmanT · Accepted Answer · 2018-04-25 22:17:16Z

0

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.

answered Apr 25, 2018 at 22:17

BossmanT

5832 gold badges7 silver badges17 bronze badges

Comments

Yuvaraj Ram · Accepted Answer · 2018-04-25 21:20:15Z

-1

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];
});

answered Apr 25, 2018 at 21:20

Yuvaraj Ram

674 bronze badges

Collectives™ on Stack Overflow

How do I map an array of numbers to a property in an array of objects?

5 Answers 5

4 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related