How can we merge more then two array of object into one array of objects

Question

How can I merge more than two array of objects into one array of objects. Like I have:

var arr1 = [{"userID": 554,"name":"abc"},{"userID": 555,"name":"xyz"}]    

var arr2 = [{"userID": 554,"lang":"ENG"},{"userID": 554,"lang":"GER"},{"userID": 555,"lang":"ENG"}]

var arr3 = [{"userID": 554,"SET":"QWE"},{"userID": 555,"SET":"ABC"},{"userID": 555,"SET":"XYZ"}]

Now I want to merge all these into one by the same key value i.e., userID, so my final output should be like

var final = [
    {
        "name":"abc"
        "userID": 554,
        "arr2" = [
            {
                "userID": 554,
                "lang":"ENG"
            },
            {
                "userID": 554,
                "lang":"GER"
            }
        ],
        "arr3" = [
            {
                "userID": 554,
                "SET":"QWE"
            }
        ]
    },
    {
        "userID": 555,
        "name":"xyz"
        "arr2" = [
            {
                "userID": 555,
                "name":"ENG"
            }
        ],
        "arr3" = [
            {
                "userID": 555,
                "SET":"ABC"
            },
            {
                "userID": 555,
                "SET":"XYZ"
            }
        ]
    }
]

I can't user ES6 with Spread operator (...) as I have a condition that it should be merged in the array where the key userID matches so that I gets the above output or like {"userID": 554, "name": "abc", "lang": ["ENG", "GER"],...}

You have a typo in the second array, name should be lang I suppose? else I think it is confusing... — KungWaz, Mar 28 '18 at 09:28
Possible duplicate of [es6 using spread to concat multiple arrays](https://stackoverflow.com/questions/43455911/es6-using-spread-to-concat-multiple-arrays) — Suhail Gupta, Mar 28 '18 at 09:31
Why do you want to add arr2 and arr3 as props with arrays? Wouldn't it be more readable to have {"userID": 554, "name": "abc", "lang": ["ENG", "GER"],...} — KungWaz, Mar 28 '18 at 09:37
You need to add the code ([mcve]) you've tried to solve this problem to your question. Asking us to solve it for you is against site guidelines when you've not shown that you've at least _tried_. — Andy, Mar 28 '18 at 09:38
@KungWaz Yes, that could also do the job. I just need to merge them into one on the basis of same userID — Sonu, Mar 28 '18 at 09:45

score 1 · Accepted Answer · answered Mar 28 '18 at 10:26

try this one, should give exact output

let result = arr1.map(item =>{
    let obj = {};
    obj.userID = item.userID;
    obj.name = item.name;
    obj.arr2 = arr2.filter( it => it.userID === item.userID);
    obj.arr3 = arr3.filter( it => it.userID === item.userID);
    return obj;
})
console.log(result);

score 1 · Answer 2 · answered Mar 28 '18 at 10:45

Based on the answer from @Deshak9

var arr1 = [{"userID": 554,"name":"abc"},{"userID": 555,"name":"xyz"}]    
var arr2 = [{"userID": 554,"lang":"ENG"},{"userID": 554,"lang":"GER"},{"userID": 555,"lang":"ENG"}]
var arr3 = [{"userID": 554,"SET":"QWE"},{"userID": 555,"SET":"ABC"},{"userID": 555,"SET":"XYZ"}]

let result = arr1.map(item => {
    let obj = {};
    obj.userID = item.userID;
    obj.name = item.name;
    obj.lang = arr2.filter( it => it.userID === item.userID).map(item => { return item.lang; });
    obj.SET = arr3.filter( it => it.userID === item.userID).map(item => { return item.SET; });
    return obj;
})
console.log(result);

I think it makes it more readable to add all the values to an array for the given property. See the example below.

{
  "userID": 554,
  "name": "abc",
  "lang": [
    "ENG",
    "GER"
  ],
  "SET": [
    "QWE"
  ]
}

score 0 · Answer 3 · answered Mar 28 '18 at 09:38

You could just use

ES6 notation

var arr1 = [{"userID": 554,"name":"abc"},{"userID": 555,"name":"xyz"}]

var arr2 = [{"userID": 554,"lang":"ENG"},{"userID": 554,"lang":"GER"},{"userID": 555,"lang":"ENG"}]

var arr3 = [{"userID": 554,"SET":"QWE"},{"userID": 555,"SET":"ABC"},{"userID": 555,"SET":"XYZ"}]

const arr = [...arr1, ...arr2, ...arr3];
Array.prototype.contact()

Vijayanath Viswanathan · Answer 4 · 2018-03-28T10:05:59.903

0

With ES6 it is pretty easy with Spread operator (...),

var arr1 = [{"userID": 554,"name":"abc"},{"userID": 555,"name":"xyz"}]    

var arr2 = [{"userID": 554,"lang":"ENG"},{"userID": 554,"lang":"GER"},{"userID": 555,"lang":"ENG"}]

var arr3 = [{"userID": 554,"SET":"QWE"},{"userID": 555,"SET":"ABC"},{"userID": 555,"SET":"XYZ"}]

const merged = [].concat(...arr1,...arr2,...arr3)
console.log(merged)

//Another way of doing is,

const merged1 = [...arr1 , ...arr2,...arr3];
console.log(merged1)

edited Mar 28 '18 at 10:05

answered Mar 28 '18 at 09:46

Vijayanath Viswanathan

8,027
3
25
43

When I run the snippet I get, { "message": "Uncaught SyntaxError: Identifier 'merged' has already been declared", – KungWaz Mar 28 '18 at 09:54
I need to merge it on the basis of same userID – Sonu Mar 28 '18 at 09:58

How can we merge more then two array of object into one array of objects

4 Answers4