How to map array values to arrays inside an object in Javascript?

Question

I have an object which is as follows:

const data = [
  {name: 'Week 1', owner: 0, others: 4, amt: 4},
  {name: 'Week 2', owner: 0, others: 7, amt: 7},
  {name: 'Week 3', owner: 0, others: 10, amt: 10},
  {name: 'Week 4', owner: 0, others: 12, amt: 12},
  {name: 'Week 5', owner: 0, others: 3, amt: 3},
  {name: 'Week 6', owner: 0, others: 0, amt: 0},
  {name: 'Week 7', owner: 0, others: 9, amt: 9},
];

I have two arrays namely:

var arrayOwner = [0,0,0,0,0,0,0];
var arrayOthers = [2,4,3,6,3,8,9];

The problem is that I have to take the first value of each array (arrayOwner and arrayOthers) and then update the first object inside the data array.

For example, for week 1, 0 from arrayOwner and 2 from arrayOthers would be taken and then updated in the first object of the data array.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Mapping `data`

You can simply map with the .map method your array data and update two of object's value: owner and others.

The .map method creates a new array with the results of calling a provided function on every element in the calling array.

- MDN web docs

The callback provided to .map can take multiple arguments: here we will use:

currentValue: e
index: i

Here's the code that will do the mapping:

const res = data.map((e,i) => {
  e.owner = arrayOwner[i];
  e.others = arrayOthers[i];
  return e
})

Full code:

const data = [
  {name: 'Week 1', owner: 0, others: 4, amt: 4},
  {name: 'Week 2', owner: 0, others: 7, amt: 7},
  {name: 'Week 3', owner: 0, others: 10, amt: 10},
  {name: 'Week 4', owner: 0, others: 12, amt: 12},
  {name: 'Week 5', owner: 0, others: 3, amt: 3},
  {name: 'Week 6', owner: 0, others: 0, amt: 0},
  {name: 'Week 7', owner: 0, others: 9, amt: 9},
];

const arrayOwner = [0,0,0,0,0,0,0];
const arrayOthers = [2,4,3,6,3,8,9];

const res = data.map((e,i) => {
  e.owner = arrayOwner[i];
  e.others = arrayOthers[i];
  return e;
})

console.log(res)

Using a loop

You can actually modify data without having to define a separate array to get the modified array. We'll use .forEach, the given callback will be the same as previously:

data.forEach((e,i) => {
  e.owner = arrayOwner[i];
  e.others = arrayOthers[i];
  return e;
});

Here data needs to be modifiable, don't define data with const. Use var or let instead.

let data = [
  {name: 'Week 1', owner: 0, others: 4, amt: 4},
  {name: 'Week 2', owner: 0, others: 7, amt: 7},
  {name: 'Week 3', owner: 0, others: 10, amt: 10},
  {name: 'Week 4', owner: 0, others: 12, amt: 12},
  {name: 'Week 5', owner: 0, others: 3, amt: 3},
  {name: 'Week 6', owner: 0, others: 0, amt: 0},
  {name: 'Week 7', owner: 0, others: 9, amt: 9},
];

const arrayOwner = [0,0,0,0,0,0,0];
const arrayOthers = [2,4,3,6,3,8,9];

data.forEach((e,i) => {
  e.owner = arrayOwner[i];
  e.others = arrayOthers[i];
  return e;
});

console.log(data);

Side note on data structure

If you would like a shorter version, you could set a different data structure for arrayOwners and arrayOthers. Maybe have them in the same array, instead of:

[arrayOwners[0], arrayOwners[1], ...]

and

[arrayOthers[0], arrayOthers[1], ...]

have:

[ [arrayOwners[0], arrayOthers[0]], [arrayOwners[1], arrayOthers[1]], ... ]

So then you would map it like so:

const res = data.map((e,i) => {
  [ e.owner, e.others ] = arrayMods[i]
  return e;
})

Above I'm using destructuring assignment to set e.owner to arrayMods[i][0] and e.others to arrayMods[i][1]. Which is more convenient.

const data = [
  {name: 'Week 1', owner: 0, others: 4, amt: 4},
  {name: 'Week 2', owner: 0, others: 7, amt: 7},
  {name: 'Week 3', owner: 0, others: 10, amt: 10},
  {name: 'Week 4', owner: 0, others: 12, amt: 12},
  {name: 'Week 5', owner: 0, others: 3, amt: 3},
  {name: 'Week 6', owner: 0, others: 0, amt: 0},
  {name: 'Week 7', owner: 0, others: 9, amt: 9},
];

const arrayMods = [[0,2],[0,4],[0,3],[0,6],[0,3],[0,8],[0,0]];

const res = data.map((e,i) => {
  [ e.owner, e.others ] = arrayMods[i]
  return e;
})

console.log(res)

hsz · Accepted Answer · 2018-06-13 12:29:23Z

0

Just try with:

data.forEach((item, key) => {
  item.owner = arrayOwner[key];
  item.others = arrayOthers[key];
});

Or without modifying the data object directly:

const newData = data.map((item, key) => ({
  ...item,
  owner: arrayOwner[key],
  others: arrayOthers[key],
}));

answered Jun 13, 2018 at 12:29

hsz

153k63 gold badges268 silver badges320 bronze badges

Comments

Nina Scholz · Accepted Answer · 2018-06-13 12:33:14Z

You could take a helper object and an array for the keys and loop while repecting the index for update.

const
    data = [{ name: 'Week 1', owner: 0, others: 4, amt: 4 }, { name: 'Week 2', owner: 0, others: 7, amt: 7 }, { name: 'Week 3', owner: 0, others: 10, amt: 10 }, { name: 'Week 4', owner: 0, others: 12, amt: 12 }, { name: 'Week 5', owner: 0, others: 3, amt: 3 }, { name: 'Week 6', owner: 0, others: 0, amt: 0 }, { name: 'Week 7', owner: 0, others: 9, amt: 9 }],
    arrayOwner = [0, 0, 0, 0, 0, 0, 0],
    arrayOthers = [2, 4, 3, 6, 3, 8, 9],
    update = { owner: arrayOwner, others: arrayOthers };

data.forEach((o, i) => ['owner', 'others'].forEach(k => o[k] = update[k][i]));
    
console.log(data);

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

RIYAJ KHAN · Accepted Answer · 2018-06-13 12:37:47Z

0

You can use Array#map to update object with value from arrayOwner& arrayOthers

 data.map((obj, key) => {
  data.owner = arrayOwner[key] ; // update current object with value from
  data.other = arrayOthers[key] ; //arrayOwner and arrayOthers
  return data;
});

edited Jun 13, 2018 at 12:37

answered Jun 13, 2018 at 12:32

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to map array values to arrays inside an object in Javascript?

4 Answers 4

Mapping `data`

Using a loop

Side note on data structure

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Mapping data

Using a loop

Side note on data structure

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Mapping `data`