Javascript how to merge arrays by index and add it as it's property?

Question

I have an array in this format,

var users = [{name:"user1"}, {name:"user2"}, {name:"user3"}];
var regular = [{regular:"100"}, {regular:"200"}, {regular:"300"}];
var overtime = [{overtime:"150"}, {overtime:"250"}, {overtime:"300"}];

I want to merge it by it's index and add it as user's property,

like this as an output,

users = [
           {name:"user1",  earnings: [{regular:"100", overtime:"150"}]}, 
           {name:"user2",  earnings: [{regular:"200", overtime:"250"}]},
           {name:"user3",  earnings: [{regular:"300", overtime:"350"}]}  
        ];

what I did was

$.each(users, function(aa,bb){
            /* Merge Regular Amount  */
            $.each(regular, function(cc,dd){
                if(aa == cc)
                {
                    users[aa].earnings = dd; // change to label of earnings 
                }
            });

            /* Merge Overtime Amount  */
            $.each(overtime, function(cc,dd){
                if(aa == cc)
                {
                    users[aa].earnings = dd; // change to label of earnings 
                }
            });
});

however I'm only getting the overtime property, seems like it gets overwritten, Can someone help me or guide me to get the expected output, thank you,

Possible duplicate of [Access / process (nested) objects, arrays or JSON](https://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) — Liam, Feb 14 '18 at 09:34
@NinaScholz my earnings should contain a property for regular and overtime, am i doing it wrong? — apelidoko, Feb 14 '18 at 09:37
oh, disregard the earnings array, I forgot to remove it, I was adding earnings as a new property, — apelidoko, Feb 14 '18 at 09:38

Eddie · Answer 1 · 2018-02-14T09:43:37.477

You can use .map for this.

var users = [{name:"user1"}, {name:"user2"}, {name:"user3"}];
var regular = [{regular:"100"}, {regular:"200"}, {regular:"300"}];
var overtime = [{overtime:"150"}, {overtime:"250"}, {overtime:"300"}];

var result = users.map(function(v, i) {
  return {
    name: v.name,
    earnings: [{
      regular: regular[i].regular,
      overtime: overtime[i].overtime
    }]
  };
});

console.log(result);

If earnings is just an object and not an array

var users = [{name:"user1"}, {name:"user2"}, {name:"user3"}];
var regular = [{regular:"100"}, {regular:"200"}, {regular:"300"}];
var overtime = [{overtime:"150"}, {overtime:"250"}, {overtime:"300"}];

var result = users.map(function(v, i) {
  return {
    name: v.name,
    earnings: {
      regular: regular[i].regular,
      overtime: overtime[i].overtime
    }
  };
});

console.log(result);

Doc: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

i've edited my code, disregard the array earnings, It worked, thank you so much, I didn't thought of using this, i need to learn more — apelidoko, Feb 14 '18 at 09:44

Nina Scholz · Answer 2 · 2018-02-14T09:57:25.653

You could collect all properties at the same index for earnings.

Object.assign takes the first given object and assigns all properties of the second and following parameters to the first object and returns that object (which is not necessary here).

At the first part an object is assigne if the earning poperty does not exist.

Object.assign(users[i].earnings = users[i].earnings || {}, o)

              users[i].earnings = users[i].earnings || {}      assigns object if not exist

var users = [{ name: "user1" }, { name: "user2" }, { name: "user3" }],
    regular = [{ regular: "100" }, { regular: "200" }, { regular: "300" }],
    overtime = [{ overtime: "150" }, { overtime: "250" }, { overtime: "300" }];

[regular, overtime].forEach(a =>
     a.forEach((o, i) =>
         Object.assign(users[i].earnings = users[i].earnings || {}, o)));

console.log(users);

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

can you explain me in few words how object.assign works, Object.assign(users[i].earnings = users[i].earnings || {}, o))); just for a little explanation, thank you foryour help, — apelidoko, Feb 14 '18 at 09:50

score 0 · Answer 3 · answered Feb 14 '18 at 09:40

Try this code

var users = [{name:"user1"}, {name:"user2"}, {name:"user3"}];
var earnings = [];
var regular = [{regular:"100"}, {regular:"200"}, {regular:"300"}];
var overtime = [{overtime:"150"}, {overtime:"250"}, {overtime:"300"}];

var finalResult =[];
users.map(function(v, i) {
  finalResult.push({
    name: v.name,
    earnings: {
      regular: regular[i].regular,
      overtime: overtime[i].overtime
    }
    })
});

console.log(finalResult);

score 0 · Answer 4 · answered Feb 14 '18 at 09:47

0

Simpliest way:

users = users.map((user, i) => {
    user.earnings = [{
        ...regular[i],
        ...overtime[i],
    }]
})

answered Feb 14 '18 at 09:47

Sergio

1,370
11
12

Javascript how to merge arrays by index and add it as it's property?

4 Answers4