Union of Array of Objects in JavaScript and es6?

Question

So after searching the interwebz for a few hours I have not found the solution I am looking for.

I have two arrays that contain game objects with a lot of information inside. (e.g. title, slug, thumbnail, summary, genre, release date...).

The Array 1 is a collection of objects that match user's interests specified during the registration.

The Array 2 is a collection of objects that match purchased games of similar users. (Similar users are those that share common interests)

Problem: It is possible, and what is happening in my case, there are two identical games - the game in Array 1 is also in Array 2. In the first array the game is there because it matches user's interests. In the second array the game is there because a similar user has bought that game.

Question: Underscore.js has a nice little function union() http://underscorejs.org/#union that gives you a union of two arrays, but it does not work with an array of objects, only on primitive values. How could I make it work give me a union of array of objects?

So what you need is a deep merge and extend? gist.github.com/1868955 stackoverflow.com/questions/7549574/… stackoverflow.com/questions/896043/… — jcolebrand
– jcolebrand, Commented Nov 10, 2012 at 4:10
I know this isn't your question, but have you considered using unique gameIds and using key:value object for your collections? — cbayram
– cbayram, Commented Nov 10, 2012 at 4:33
@cbayram I am using MongoDB. The reason for getting the game twice in this case is because the game matches user's interests query and I have a reference to Game collection inside User.purchasedGames array: purchasedGames: [{ type: mongoose.Schema.Types.ObjectId, ref: 'Game' }}] which is another nested query. So I get separate results from 2 queries and then union them together. — Sahat Yalkabov
– Sahat Yalkabov, Commented Nov 10, 2012 at 4:49

Community · Accepted Answer · 2017-05-23 12:01:58Z

23

You could implement your own pretty easily. In this case, we make the function generic, so that it can take arrays of any data type(s) and union them using the comparator function provided.

// arr1 and arr2 are arrays of any length; equalityFunc is a function which
// can compare two items and return true if they're equal and false otherwise
function arrayUnion(arr1, arr2, equalityFunc) {
    var union = arr1.concat(arr2);

    for (var i = 0; i < union.length; i++) {
        for (var j = i+1; j < union.length; j++) {
            if (equalityFunc(union[i], union[j])) {
                union.splice(j, 1);
                j--;
            }
        }
    }

    return union;
}

function areGamesEqual(g1, g2) {
    return g1.title === g2.title;
}

// Function call example
arrayUnion(arr1, arr2, areGamesEqual);

Refer to Object comparison in JavaScript for various object comparison implementations.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Nov 10, 2012 at 4:12

Chris Hayes

12.2k5 gold badges35 silver badges48 bronze badges

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

6 Comments

L0j1k Over a year ago

Beat me to it. Nice implementation.

Sahat Yalkabov Over a year ago

Hmm no luck getting it to work. Returns undefined. gist.github.com/4049901

Chris Hayes Over a year ago

Yeah, that's unsurprising when I forgot to return a value. :) Editing.

nnnnnn Over a year ago

Nice. You could speed it up by having the outer loop stop at arr1.length and have the inner loop start at arr1.length (assuming we know that array 1 only has unique values and array 2 only has unique values). @TwilightPonyInc. - implementing are_games_same() is up to you depending on the structure of the objects, perhaps something like return g1.gameID === g2.gameID;.

dandice Over a year ago

you need to add j -= 1; after splicing. gist.github.com/dandybreath/85aa931c979f20d639f0

|

Arnaud Valensi · Accepted Answer · 2015-06-26 11:02:28Z

5

You can do it using the underscore way:

// collectionUnion(*arrays, iteratee)
function collectionUnion() {
    var args = Array.prototype.slice.call(arguments);
    var it = args.pop();

    return _.uniq(_.flatten(args, true), it);
}

It just an improvment of the original function _.union(*arrays), adding an iteratee to work collection (array of object).

Here how to use it:

var result = collectionUnion(a, b, c, function (item) {
    return item.id;
});

The original function which is just working with array, looks like that:

_.union = function() {
  return _.uniq(flatten(arguments, true, true));
};

And in bonus a full example:

// collectionUnion(*arrays, iteratee)
function collectionUnion() {
    var args = Array.prototype.slice.call(arguments);
    var it = args.pop();

    return _.uniq(_.flatten(args, true), it);
}

var a = [{id: 0}, {id: 1}, {id: 2}];
var b = [{id: 2}, {id: 3}];
var c = [{id: 0}, {id: 1}, {id: 2}];

var result = collectionUnion(a, b, c, function (item) {
    return item.id;
});

console.log(result); // [ { id: 0 }, { id: 1 }, { id: 2 }, { id: 3 } ]

answered Jun 26, 2015 at 11:02

Arnaud Valensi

1861 silver badge3 bronze badges

1 Comment

Crisboot Over a year ago

In the collection union (last bonus a full example) i will use: _.uniqBy(_.flatten(args, true), 'prop-id') lodash.com/docs/4.17.4#uniqBy

Vlad Bezden · Accepted Answer · 2016-12-30 18:11:41Z

3

Set (ES6/ES2015) will help you.

const info1 = {id: 1}
const info2 = {id: 2}
const info3 = {id: 3}

const array1 = [info1, info2]
const array2 = [info1, info3]

const union = [...new Set([...array1, ...array2])]

console.log(union)

edited Dec 30, 2016 at 18:11

answered Dec 30, 2016 at 16:21

Vlad Bezden

90.7k27 gold badges261 silver badges190 bronze badges

1 Comment

mtpultz Over a year ago

When using TypeScript and you don't want to turn on --downLevelIteration you can do const union = [...Array.from(new Set([...array1, ...array2]))]

DinoMyte · Accepted Answer · 2022-02-23 19:23:23Z

2

It is really easy to do it in typescript using the set function.

const firstArr = [
    {
        id: '1',
        winner: 'Captain America',
    },
    {
        id: '4',
        winner: 'Aquaman',
    },
    {
        id: '2',
        winner: 'Captain America',
    },
    {
        id: '3',
        winner: 'Aquaman',
    },
]

const secondArr = [
    {
        id: '1',
        winner: 'Wonder women',
    },
    {
        id: '2',
        winner: 'Param',
        strenths: ['fly', 'fight', 'speed'],
    },
]
const mergedArray = [...secondArr, ...firstArr]

let set = new Set()
let unionArray = mergedArray.filter((item) => {
    if (!set.has(item.id)) {
        set.add(item.id)
        return true
    }
    return false
}, set)
 
console.log(unionArray);

edited Feb 23, 2022 at 19:23

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

answered Dec 16, 2020 at 19:52

gem007bd

1,16513 silver badges12 bronze badges

Comments

user626963 · Accepted Answer · 2012-11-10 04:37:45Z

1

jQuery has the method extend:

$.extend(true, object1, object2);

answered Nov 10, 2012 at 4:37

user626963

1 Comment

Sahat Yalkabov Over a year ago

So does underscore.js, but I was looking for a union operation. Extend from what I understand is for merging two objects. I want to eliminate an object entirely if it's already in the array. I guess you could use extend(), it just wasn't the first thing that came to my mind.

John Salvatier · Accepted Answer · 2013-09-17 01:04:47Z

1

Using underscore extend, you can do:

var objects = [{ bar : 1, nuts : 2} , {foo : 3, nuts : 4}]
_.extend.apply(this,objects)

If the list can be empty, make sure to append an empty object to it.

answered Sep 17, 2013 at 1:04

John Salvatier

3,2475 gold badges28 silver badges31 bronze badges

Comments

Murad Hossain · Accepted Answer · 2018-09-11 05:26:52Z

1

Here is better solution

function arrayUnion() {
    var args = Array.prototype.slice.call(arguments);
    var it = args.pop();

    return _.uniq(_.flatten(args, true), it);
}

var a = [{id: 0}, {id: 1}, {id: 2}];
var b = [{id: 2}, {id: 3}];
var c = [{id: 0}, {id: 1}, {id: 2}];

var result = arrayUnion(a, b, c, function (item) {
    return item.id;
});

console.log(result);

answered Sep 11, 2018 at 5:26

Murad Hossain

213 bronze badges

Comments

Rimika · Accepted Answer · 2021-01-08 08:41:24Z

const a=[
  {
    id:1,
    label:"mnbmnbm1"
  },
  {
    id:2,
    label:"mnbmnbm2"
  },
  {
    id:3,
    label:"mnbmnbm3"
  }
];
const b=[
  {
    id:1,
    label:"mnbmnbm1"
  },
  {
    id:2,
    label:"mnbmnbm2"
  },
  {
    id:4,
    label:"mnbmnbm5"
  }
];
const c=[
  {
    id:1,
    label:"mnbmnbm1"
  },
  {
    id:5,
    label:"mnbmnbm5"
  },
  {
    id:6,
    label:"mnbmnbm6"
  }
];

function arrayUnion(...args){
  return arrayUnique(flatten(...args));
}

function flatten(...args){
  return args.reduce((acc,cur)=>{
     if(Array.isArray(acc) && Array.isArray(cur)){
        acc=[...acc,...cur];
        return acc;
     }
  });
}

function arrayUnique(arr){
    let map={};
    
    return arr.filter(obj =>{
      let objID=obj.id;
      
      if(!map[objID]){
        map[objID]=true;
        return obj;
      }
    });
}

console.log("result",arrayUnion(a,b,c));

user426315 · Accepted Answer · 2025-02-06 18:51:54Z

0

For me I found the following code was faster than the accepted solution. You can replace uuid with any other uniquely identifying attribute of the objects that is a primitive type.

function union(arr1, arr2) {
    const union = arr1.concat.(arr2);
    const uuidMap = new Map();

    for (const obj of union) {
        uuidMap.set(obj.uuid, obj);
    }

    const uuidSet = new Set(uuidMap.keys());
    const result = [];

    for (const uuid of uuidSet) {
        const obj = uuidMap.get(uuid);

        if (obj!== undefined) {
            result.push(section);
        }
    }
}

union(arr1, arr2)

answered Feb 6 at 18:51

user426315

1

Comments

Ajeet Shah · Accepted Answer · 2021-03-16 22:04:58Z

-1

You can use flat and Set:

const union = (...arr) => [...new Set(arr.flat())];

console.log(union([1, 2], [2, 3], [3]));

edited Mar 16, 2021 at 22:04

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

answered Mar 16, 2021 at 18:27

Nityam Gosain

1

Collectives™ on Stack Overflow

Union of Array of Objects in JavaScript and es6?

10 Answers 10

6 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

6 Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related