Union of 2 arrays using lodash

Question

I have the following 2 arrays:

    arr1 = [
            {
                "key1": "Value1"
            },
            {
                "key2": "Value2"
            },
            {
                "key3": "Test3"
            },
            {
                "key4": "Test4"
            },
            {
                "key5": "Test5"
            },
            {
                "key6": "Test6"
            },
            {
                "key7": "Test7"
            }
        ]

And the second array is

    arr2 = [
            {
                "key3": "Value3-changed"
            },
            {
                "key6": "Value6-changed"
            }

        ]

Now once I join the 2 arrays the result would be

   resultArr = [
        {
            "key1": "Value1"
        },
        {
            "key2": "Value2"
        },
        {
            "key3": "Value3-changed"
        },
        {
            "key4": "Test4"
        },
        {
            "key5": "Test5"
        },
        {
            "key6": "Value6-changed"
        },
        {
            "key7": "Test7"
        }
    ]

I saw the solution for Lodash union of arrays of objects. But as for my case, the keys are different. Any, pointers on solving this issue? I was trying to use lodash _.unionBy and then _.uniqWith but not getting the desired result.

Thanks, Andy

Can you copy the code into a snippet so we can see where it might have gone wrong? — Nope, Mar 27 '18 at 16:02
Without lodash, you can concat 2 arrays, and the remove duplicates element if you need the union semantics. See for instance : https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items — Pac0, Mar 27 '18 at 16:04
Possible duplicate of [How to merge two array of object by using lodash?](https://stackoverflow.com/questions/38612972/how-to-merge-two-array-of-object-by-using-lodash) — Mr. Polywhirl, Mar 27 '18 at 16:25
also possible duplicate : [lodash - Union of arrays of objects](https://stackoverflow.com/questions/29320817/lodash-union-of-arrays-of-objects) — Pac0, Mar 27 '18 at 16:28

funkizer · Answer 1 · 2018-03-27T16:38:04.113

2

No lodash needed. First reduce both arrays to a single object, where keys coming later overwrite any previously set values:

const obj = [...arr1, ...arr2].reduce((acc,cur) => Object.assign(acc, cur), {});
// {key1: value1, ...}

Edit, even simpler:

const obj = Object.assign({}, ...arr1, ...arr2);

Then map the keys back to an array of objects:

const resultArray = Object.keys(obj)
   .sort() // if alphanumeric order of keys matters to you
   .map(key => { const o={}; o[key]=obj[key]; return o;});

edited Mar 27 '18 at 16:38

answered Mar 27 '18 at 16:13

funkizer

4,626
1
18
20

1

As i see it, they're supposed to be unique, ie. key3 in arr2 overwrites key3 in arr1, etc. – funkizer Mar 27 '18 at 16:16
So 31piy what do you mean? – funkizer Mar 27 '18 at 16:17
so to be clear, there will only be unique keys with this code. You saying there should be duplicates instead? – funkizer Mar 27 '18 at 16:19
Looking at OP's example, you are correct, it seems there should not be duplicates, instead the values in second array should overwrite the values in the first array. – Pac0 Mar 27 '18 at 16:29
1

Yes, that's what's happening here. obj will only have one of each key. Object.assign({key3: 'old'}, {key3: 'new'}) ==> {key3: 'new'} – funkizer Mar 27 '18 at 16:32
Actually, with more use of spread op. this could be written in an even simpler way. I'll edit – funkizer Mar 27 '18 at 16:35

Pac0 · Answer 2 · 2018-03-27T16:30:34.810

You can do this without lodash like this :

(pushes new objects, or update existing one.

let arr1 = [
    {
        "key1": "Value1"
    },
    {
        "key2": "Value2"
    },
    {
        "key3": "Test3"
    },
    {
        "key4": "Test4"
    },
    {
        "key5": "Test5"
    },
    {
        "key6": "Test6"
    },
    {
        "key7": "Test7"
    },
]

let arr2 = [
    {
        "key3": "Value3-changed"
    },
    {
        "key6": "Value6-changed"
    },
    {
        "key10": "Value10-new"
    },
]

for (let obj of arr2) {
    let keyName = Object.keys(obj)[0];
    let existingObject = arr1.find(x => Object.keys(x)[0] === keyName );
    
    if (existingObject) {
        // object with same key exists. So we update it.
        existingObject[keyName] = obj[keyName];
    } else {
        // key was not found, this is a new object, let's add it.
        arr1.push(obj);
    }
}

console.log(arr1)

There is probably a more elegant way to do that, of course.

Thanks @Pac0 for your help. I accepted your answer. – Anirban Mar 27 '18 at 17:15 — Anirban, Mar 27 '18 at 17:15

score 1 · Answer 3 · edited Mar 28 '18 at 15:37

1

If you have access to the ... spread operator:

map(chunk(toPairs(assign(...arr1, ...arr2))), fromPairs)

Otherwise:

map(chunk(toPairs(spread(assign)(concat(arr1, arr2)))), fromPairs)

Which is ugly but does the job.

Lodash plugins

_.mixin({
  'assignPairsChunkAndMapObjects' : function(arr1, arr2) {
    return _.map(_.chunk(_.toPairs(_.assign(...arr1, ...arr2))), _.fromPairs);
  },
  'assignPairsChunkAndMapObjectsChained' : function(arr1, arr2) {
    return _.chain(_.assign(...arr1, ...arr2)).toPairs().chunk().map(_.fromPairs).value();
  }
});

edited Mar 28 '18 at 15:37

Mr. Polywhirl

42,981
12
84
132

answered Mar 27 '18 at 16:39

iDaN5x

616
9
12

But that creates a single object with all the keys. OP wants an array of each object in the original with updated key-value pairs. – Mr. Polywhirl Mar 27 '18 at 16:48
I converted your code to a Lodash plugin and added a chained version which accomplishes the same thing. – Mr. Polywhirl Mar 28 '18 at 15:37

score 0 · Answer 4 · answered Mar 27 '18 at 16:37

With native javascript you can achieve the same using for ..in & map function

var arr1 = [{
    "key1": "Value1"
  },
  {
    "key2": "Value2"
  },
  {
    "key3": "Test3"
  },
  {
    "key4": "Test4"
  },
  {
    "key5": "Test5"
  },
  {
    "key6": "Test6"
  },
  {
    "key7": "Test7"
  }
]
var arr2 = [{
    "key3": "Value3-changed"
  },
  {
    "key6": "Value6-changed"
  }

];
// get object keys from both
var getArr2Keys = arr2.map(function(items) {
  for (let keys in items) {
    return keys;
  }
});

var getArr1Keys = arr1.map(function(items) {
  for (let keys in items) {
    return keys;
  }
});


// iterate over the newly created object and check if the key matched
getArr2Keys.forEach(function(itemArr2, index) {
  var x = getArr1Keys.findIndex(function(itemArr1) {
    return itemArr2 === itemArr1;
  })
  // replace the key value of arr1 with value from arr2
  arr1[x][itemArr2] = arr2[index][itemArr2]

})

console.log(arr1)

Mr. Polywhirl · Answer 5 · 2018-03-27T16:45:48.123

You can create a mixin to iterate over the first array and merge it with the second one.

_.mixin({
  'mergeObjectList' : function(arr1, arr2) {
    return _.map(arr1, function(obj) {
      Object.keys(obj).forEach(key => {
        var found = _.find(arr2, x => Object.keys(x).indexOf(key) > -1);
        if (found != null) {
          return _.merge(obj, found);
        }
      });
      return obj;
    });
  }
});

var arr1 = [
  { "key1": "Value1" },
  { "key2": "Value2" },
  { "key3": "Test3" },
  { "key4": "Test4" },
  { "key5": "Test5" },
  { "key6": "Test6" },
  { "key7": "Test7" }
];

var arr2 = [
  { "key3": "Value3-changed" },
  { "key6": "Value6-changed" }
];

var arr3 = _.mergeObjectList(arr1, arr2);

document.body.innerHTML = JSON.stringify(arr3, null, 4);

body { font-family: monospace; white-space: pre; }

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

Narendra Jadhav · Answer 6 · 2018-03-27T17:03:58.947

You can also use map and find method of array.

In ES5

var arr1 = [{
    "key1": "Value1"
  }, {
    "key2": "Value2"
  }, {
    "key3": "Test3"
  }, {
    "key4": "Test4"
  }, {
    "key5": "Test5"
  }, {
    "key6": "Test6"
  }, {
    "key7": "Test7"
  }],

  arr2 = [{
    "key3": "Value3-changed"
  }, {
    "key6": "Value6-changed"
  }],

  key = '';

var result = arr1.map(function(item) {
  key = Object.keys(item)[0];
  return arr2.find(function(v) {
    return v[key]
  }) || item;
});

console.log(result);

In ES6

const arr1 = [{
    "key1": "Value1"
  }, {
    "key2": "Value2"
  }, {
    "key3": "Test3"
  }, {
    "key4": "Test4"
  }, {
    "key5": "Test5"
  }, {
    "key6": "Test6"
  }, {
    "key7": "Test7"
  }],

  arr2 = [{
      "key3": "Value3-changed"
    }, {
      "key6": "Value6-changed"
    }

  ];

let result = arr1.map(item => {
  let key = Object.keys(item)[0];
  return arr2.find(v => v[key]) || item;
});

console.log(result);

Union of 2 arrays using lodash

6 Answers6

Lodash plugins