How to merge array of arrays in one array (in JavaScript)?

Question

I have an array of objects in JavaScript. Each object contains property named "myPropArray", which is actually another array. Here is the structure of this array:

let myBaseArray = [
    {
        myPropArray: ["s1", "s2"],
        someOtherProp: "randomString1"
    },
    {
        myPropArray: ["s2", "s3"],
        someOtherProp: "randomString2"
    }
]

What I need is to take all arrays under this property and to merge them all in one array, without duplicates (in JavaScript). Here is my implementation (using lodash):

_.map(myBaseArray , 'myPropArray')

Which is actually returning the following result:

[
  ["s1", "s2"],
  ["s2", "s3"]
]

But what I want to accomplish is:

["s1", "s2", "s3"]

Also (if possible) I'm trying to avoid for-each loops, since this needs to me optimized as much as possible and I'm wondering if can be done using lodash mappers or other similar function?

There are already some solutions from this stage where I got (as the solution here) but I would like to find a solution tho this problem which will be specific for my "array or objects which contains properties of type Array" .

You say you want to avoid loops but how do you think lodash is getting the data from the arrays? Just because you don't write the loops doesn't mean your code isn't executing them. — takendarkk, Jul 12 '18 at 21:55
You can just flatten and filter out duplicates from the results you are currently getting. Both of which are easily findable on here — mhodges, Jul 12 '18 at 21:56
Possible duplicate of [Merge/flatten an array of arrays in JavaScript?](https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays-in-javascript) — Heretic Monkey, Jul 12 '18 at 21:56
Or [How to merge two arrays in JavaScript and de-duplicate items](//stackoverflow.com/q/1584370) or [Merge/flatten multidimensional array and remove duplicates Javascript](//stackoverflow.com/q/38894237) — Heretic Monkey, Jul 12 '18 at 21:57
You might also consider using a set instead of an array to handle duplicates — pinkwaffles, Nov 20 '18 at 19:31

Ori Drori · Accepted Answer · 2018-07-12T21:59:03.273

Extract the property's value with Array.map(), flatten by spreading into Array.concat(), and use a Set to get unique values. Spread the Set back to an array:

const myBaseArray = [
    {
        myPropArray: ["s1", "s2"],
        someOtherProp: "randomString1"
    },
    {
        myPropArray: ["s2", "s3"],
        someOtherProp: "randomString2"
    }
]

const result = [...new Set([].concat(...myBaseArray.map((o) => o.myPropArray)))]

console.log(result)

The lodash way would be to use _.flatMap(), and _.uniq():

const myBaseArray = [
    {
        myPropArray: ["s1", "s2"],
        someOtherProp: "randomString1"
    },
    {
        myPropArray: ["s2", "s3"],
        someOtherProp: "randomString2"
    }
]

const result = _.uniq(_.flatMap(myBaseArray, 'myPropArray'))

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

How to merge array of arrays in one array (in JavaScript)?

1 Answers1