Merge 2 arrays of objects

Question

Lets have a look at an example  var arr1   new Array  name   quot lang quot   value   quot English quot                          name   quot age quot   value   quot 18 quot      var arr2   new Array  name    quot childs quot   value   5                          name   quot lang quot   value   quot German quot      I need to merge those 2 arrays of objects and create the following array  var arr3   new Array  name   quot lang quot   value   quot German quot                          name   quot age quot   value   quot 18 quot                          name    quot childs quot   value   5      Is there any JavaScript or jQuery function to do this    extend doesn t suit me  It returns var arr4   new Array  name    quot childs quot   value   5                          name   quot lang quot   value   quot German quot

User · Answer

let mergeArray   arrA filter aItem   gt   arrB find bItem   gt  aItem name     bItem name

User · Answer

If you want to merge 2 arrays of objects in JavaScript  You can use this one line trick   Array prototype push apply arr1 arr2    For Example   var arr1     name   lang   value   English    name   age   value   18     var arr2     name    childs   value   5     name   lang   value   German      Array prototype push apply arr1 arr2     console log arr1       final merged result will be in arr1   Output      name   lang   value   English      name   age   value   18      name   childs   value   5      name   lang   value   German

User · Answer

Posting this because unlike the previous answers this one is generic  no external libraries  O n   actually filters out the duplicate and keeps the order the OP is asking for  by placing the last matching element in place of first appearance   function unique array  keyfunc        return array reduce  result  entry    gt            const key   keyfunc entry          if key in result seen                result array result seen key     entry           else               result seen key    result array length             result array push entry                    return result          array      seen       array    Usage  var arr1   new Array  name   quot lang quot   value   quot English quot     name   quot age quot   value   quot 18 quot    var arr2   new Array  name    quot childs quot   value   5     name   quot lang quot   value   quot German quot     var arr3   unique     arr1     arr2   x   gt  x name     arr3            name   quot lang quot   value   quot German quot          name   quot age quot   value   quot 18 quot         name   quot childs quot   value   quot 5 quot

User · Answer

Simple solution   var tx      id  1    id  2    var tx1      id  3    id  4      var txHistory   tx concat tx1   console log txHistory       output        id  1    id  2    id  3    id  4

User · Answer

Yet another version using reduce   method    x000D   x000D  var arr1   new Array  name   lang   value   English     name   age   value   18     x000D  var arr2   new Array  name    childs   value   5     name   lang   value   German     x000D   x000D  var arr   arr1 concat arr2  reduce function prev  current  index  array    x000D      x000D     if   current name in prev keys     x000D        prev keys current name    index  x000D        prev result push current      x000D        x000D     else  x000D         prev result prev keys current name     current  x000D         x000D   x000D     return prev  x000D     result      keys       result  x000D     x000D  document getElementById  output   innerHTML   JSON stringify arr null 2       x000D   lt pre id  output   gt  x000D   x000D   x000D

User · Answer

You can leverage hash maps and Object values to accomplish this in roughly O 3n  time  This looks like O n 2   but the outer loop is just to iterate through the arrays to be merged  function uniqueMerge arrays      const results         arrays forEach  arr    gt        arr forEach item   gt          results item name    item                   return Object values results

User · Answer

The easiest way is with some ES6 magic   Merge two with duplicates   const a     a  1    b  2   const b     a  1    const result   a concat b       a  1    b  2    a  1     Without duplicates it is same as the above plus   const distinct       new Set result map item   gt  item YOUR PROP HERE

User · Answer

With lodash     uniqBy     arr1     arr2    name

User · Answer

This is how I ve tackled a similar issue in an ES6 context   function merge array1  array2  prop        return array2 map function  item2            var item1   array1 find function  item1                return item1 prop      item2 prop                       return Object assign     item1  item2               Note  This approach will not return any items from array1 that don t appear in array2     EDIT  I have some scenarios where I want to preserve items that don t appear in the second array so I came up with another method   function mergeArrays arrays  prop        const merged            arrays forEach arr   gt            arr forEach item   gt                merged item prop     Object assign     merged item prop    item                            return Object values merged      var arr1           name   Bob   age  11          name   Ben   age  12          name   Bill   age  13        var arr2           name   Bob   age  22          name   Fred   age  24          name   Jack   age  25          name   Ben         console log mergeArrays  arr1  arr2    name

User · Answer

For those who are experimenting with modern things   var odd           name    1   arr   in odd           name    3   arr   in odd        var even           name    1   arr   in even           name    2   arr   in even           name    4   arr   in even           ----    ES5 using Array filter and Array find function merge a  b  prop     var reduced   a filter function aitem         return   b find function bitem             return aitem prop      bitem prop                     return reduced concat b     console log   ES5   merge odd  even   name          ----    ES6 arrow functions function merge a  b  prop       var reduced    a filter  aitem   gt    b find   bitem   gt  aitem prop      bitem prop       return reduced concat b     console log   ES6   merge odd  even   name          ----    ES6 one-liner var merge    a  b  p    gt  a filter  aa   gt    b find   bb   gt  aa p      bb p     concat b     console log   ES6 one-liner   merge odd  even   name          Results      stuff in the  b  array replaces things in the  a  array                            name    3               arr    in odd                                 name    1               arr    in even                                 name    2               arr    in even                                 name    4               arr    in even

User · Answer

Update 12 Oct 2019 New version based only on newer Javascript and without the need of any 3rd party library   x000D   x000D  const mergeByProperty    target  source  prop    gt      source forEach sourceElement   gt        let targetElement   target find targetElement   gt          return sourceElement prop      targetElement prop              targetElement   Object assign targetElement  sourceElement    target push sourceElement          var target    arr1        name   lang   value   English     name   age   value   18     var source    arr2        name    childs   value   5     name   lang   value   German      mergeByProperty target  source   name     console log target  x000D   x000D   x000D   This answer was getting old  libs like lodash and underscore are much less needed these days  In this new version  the target  arr1  array is the one we   re working with and want to keep up to date  The source  arr2  array is where the new data is coming from  and we want it merged into our target array  We loop over the source array looking for new data  and for every object that is not yet found in our target array we simply add that object using target push sourceElement  If  based on our key property   name    an object is already in our target array - we update its properties and values using Object assign targetElement  sourceElement   Our    target    will always be the same array and with updated content   Old answer using underscore or lodash I always arrive here from google and I m always not satisfy from the answers  YOU answer is good but it ll be easier and neater using underscore js DEMO  http   jsfiddle net guya eAWKR  Here is a more general function that will merge 2 arrays using a property of their objects  In this case the property is  name   x000D   x000D  var arr1     name   lang   value   English     name   age   value   18     var arr2     name    childs   value   5     name   lang   value   German      function mergeByProperty arr1  arr2  prop        each arr2  function arr2obj        var arr1obj     find arr1  function arr1obj          return arr1obj prop      arr2obj prop                arr1obj     extend arr1obj  arr2obj    arr1 push arr2obj            mergeByProperty arr1  arr2   name     console log arr1   x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 15 lodash core min js  gt  lt  script gt  x000D   x000D   x000D     name   quot lang quot   value   quot German quot     name   quot age quot   value   quot 18 quot     name    quot childs quot   value   5

User · Answer

Merging two arrays   var arr1   new Array  name   lang   value   English     name   age   value   18     var arr2   new Array  name    childs   value   5     name   lang   value   German     var result arr1 concat arr2      result    name   lang   value   English     name   age   value   18     name    childs   value   5     name   lang   value   German      Merging two arrays without duplicated values for  name    var arr1   new Array  name   lang   value   English     name   age   value   18     var arr2   new Array  name    childs   value   5     name   lang   value   German     var i p obj    result     for i 0 i lt arr1 length i   obj arr1 i  name  arr1 i  value  for i 0 i lt arr2 length i   obj arr2 i  name  arr2 i  value  for p in obj if obj hasOwnProperty p  result push  name p value obj p        result    name   lang   value   German     name   age   value   18     name    childs   value   5

User · Answer

Using lodash you want   uniqBy  var arr3     uniqBy arr1 concat arr2    name       es5  let arr3     uniqBy     arr1     arr2    name       es6   Order of arr1  arr2 matters   See docs https   lodash com docs 4 17 4 uniqBy

User · Answer

You could use an object to collect up your properties while replacing duplicates and then expand flatten that object back to an array  Something like this   function merge args        args    Array prototype slice call arguments       var o            for var i   0  i  lt  args length    i          for var j   0  j  lt  args i  length    j              o args i  j  name    args i  j  value      return o     function expand o        var a            for var p in o          if o hasOwnProperty p               a push   name  p  value  o p         return a     var arr1   new Array  name   lang   value   English     name   age   value   18     var arr2   new Array  name    childs   value   5     name   lang   value   German     var arr3   expand merge arr1  arr2      I don t know if this is the fastest way but it works for any number of input arrays  for example  this   var a   expand      merge            name   lang   value   English     name   age   value   18               name   childs   value   5     name   lang   value   German               name   lang   value   Pancakes               Gives you the same thing in a that was in arr3 with  German  replaced by  Pancakes    This approach does assume that your objects all have the same  name       value       form of course   You can see it working here  open your console please   http   jsfiddle net ambiguous UtBbB

User · Answer

Here I first filter arr1 based on element present in arr2 or not  If it s present then don t add it to resulting array otherwise do add  And then I append arr2 to the result   arr1 filter item   gt      if   arr2 some item1  gt item name  item1 name         return item        concat arr2

User · Answer

var newArray   yourArray concat otherArray   console log  Concatenated newArray     newArray

User · Answer

Very simple using ES6 spread operator    x000D   x000D  const array1     a   HI      b   HOW    x000D  const array2     c   ARE     d   YOU     x000D   x000D  const mergedArray        array1     array2   x000D  console log  Merged Array     mergedArray  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   x000D    Merged Array     a   HI      b   HOW    c   ARE     d   YOU       Note  The above solution is to just merge two arrays using ES6 spread operator   Edit on 07 January 2020 by  bh4r4th   As the context changed due to edits after my initial solution  I would like to update my solution to match current criteria  i e     Merger array objects without creating duplicate objects and  update the value if the name property already exists in the prior array    x000D   x000D  const arr1     x000D        name   lang   value   English     x000D        name   age   value   18    x000D    x000D  const arr2     x000D        name   childs   value   2      x000D        name   lang   value   German    x000D    x000D  const arr3     x000D        name   lang   value   German     x000D        name   age   value   28     x000D        name   childs   value   5    x000D    x000D   x000D     Convert to key value dictionary or object x000D  const convertToKeyValueDict   arrayObj   gt    x000D      const val      x000D      arrayObj forEach ob   gt    x000D          val ob name    ob value x000D         x000D      return val x000D    x000D   x000D     update or merge array x000D  const updateOrMerge    a1  a2    gt    x000D      const ob1   convertToKeyValueDict a1  x000D      const ob2   convertToKeyValueDict a2  x000D         Note  Spread operator with objects used here x000D      const merged obj       ob1     ob2  x000D      const val   Object entries merged obj  x000D      return val map obj   gt     name  obj 0   value  obj 1      x000D    x000D   x000D  const v1   updateOrMerge arr1  arr2  x000D  const v2   updateOrMerge v1  arr3  x000D  console log  Merged array1 and array2    JSON stringify v1    n n   x000D  console log  Merged above response and array3    JSON stringify v2    n n   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 6 3 umd react production min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 6 3 umd react-dom production min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Try this   var a      a  20   b  10  c   c   d   asd   f   any    var b      a  20   b  10  c   c    e   nan   g  10200    var p        map a  function da   var chk     filter b  function ds   return da a    ds a    0  p push   extend da  chk         console log p    OutPut will be               a   20       b   10       c    c        d    asd        f    any        e    nan        g   10200

User · Answer

const array1     id 1 name  ganza     id 2 name  respice dddd    id 4 name  respice dddd    id 6 name  respice dddd     id 7 name  respice dddd     const array2     id 1 name  ganza respice    id 2 name  respice    id 3 name  mg       function mergeTwoArray array1 array2        return array1 map  item i   gt           if array2 i   amp  amp  item id   array2 i  id             return array2 i              else              return item                           const result   merge array1 array2   console log result     here is the result   Array  Object   id  1  name   ganza respice     Object   id  2  name   respice     Object   id  4  name   respice dddd     Object   id  6  name   respice dddd     Object   id  7  name   respice dddd

User · Answer

const array1     id 1 name  ganza     id 2 name  respice dddd    id 4 name  respice dddd    id 6 name  respice dddd     id 7 name  respice dddd     const array2     id 1 name  ganza respice    id 2 name  respice    id 3 name  mg       function mergeTwoArray array1 array2        return array1 map  item i   gt           if array2 i   amp  amp  item id   array2 i  id             return array2 i              else              return item                           const result   mergeTwoArray array1 array2   console log result     here is the result   Array  Object   id  1  name   ganza respice      Object   id  2  name   respice     Object   id  4  name   respice dddd      Object   id  6  name   respice dddd     Object   id  7  name   respice dddd

User · Answer

I was facing the same problem and based on guya answer I have extended the underscore library and also added a bit more of functionality that I was requiring  Here s the Gist          Merges two object-like arrays based on a key property and also merges its array-like attributes specified in objectPropertiesToMerge     It also removes falsy values after merging object properties         param firstArray The original object-like array      param secondArray An object-like array to add to the firstArray      param keyProperty The object property that will be used to check if objects from different arrays are the same or not      param objectPropertiesToMerge The list of object properties that you want to merge  It all must be arrays      returns The updated original array      function merge firstArray  secondArray  keyProperty  objectPropertiesToMerge         function mergeObjectProperties object  otherObject  objectPropertiesToMerge              each objectPropertiesToMerge  function  eachProperty                object eachProperty      chain object eachProperty   union otherObject eachProperty   compact   value                           if  firstArray length     0              each secondArray  function  each                firstArray push each                     else             each secondArray  function  itemFromSecond                var itemFromFirst     find firstArray  function  item                    return item keyProperty      itemFromSecond keyProperty                                if  itemFromFirst                    mergeObjectProperties itemFromFirst  itemFromSecond  objectPropertiesToMerge                 else                   firstArray push itemFromSecond                                    return firstArray       mixin               merge  merge               Hope it to be useful  Regards

User · Answer

Solution utilizing JS Map  const merge    arr1  arr2  prop    gt        const resultMap   new Map arr1 map  item    gt   item prop   item         arr2 forEach  item    gt            const mapItem   resultMap get item prop            if  mapItem  Object assign mapItem  item           else resultMap set item prop   item               return     resultMap values         const arr1   new Array  name   quot lang quot   value   quot English quot     name   quot age quot   value   quot 18 quot     const arr2   new Array  name    quot childs quot   value   5     name   quot lang quot   value   quot German quot      console log merge arr1  arr2   quot name quot      Which produces

User · Answer

If you want to merge the 2 arrays  but remove duplicate objects use this  Duplicates are identified on  uniqueId of each object  function mergeObjectArraysRemovingDuplicates firstObjectArray  secondObjectArray      return firstObjectArray concat      secondObjectArray filter  object    gt   firstObjectArray map  x    gt  x uniqueId  includes object uniqueId

User · Answer

const arr1     Vijendra   Singh    const arr2     Singh    Shakya     arr2 forEach item   gt            if  arr1 find k   gt  k   item             arr1 push item            console log arr1

User · Answer

I was recently stumped with this problem and I came here with the hope to have an answer but the accepted answer uses 2 for in loops which I wouldn t prefer  I finally managed to make my own  Doesn t depend on any library whatsoever   function find objArr  keyToFind       var foundPos   objArr map function ob           return ob type         indexOf keyToFind       return foundPos     function update arr1 arr2       for var i   0  len   arr2 length  current  i lt  len  i             var pos   find arr1  arr2 i  name            current   arr2 i           if pos     -1  for var key in arr2  arr1 pos  key    arr2 key           else arr1 arr1 length    current             This also maintains the order of arr1

User · Answer

merge a  b  key        let merged           a forEach aitem   gt            let found   b find  bitem   gt  aitem key      bitem key            merged push found  found  aitem               return merged

User · Answer

var arr3       for var i in arr1      var shared   false     for  var j in arr2         if  arr2 j  name    arr1 i  name               shared   true             break              if  shared  arr3 push arr1 i     arr3   arr3 concat arr2

User · Answer

With ES6 you can do it very easy as below   var arr1   new Array  name   lang   value   German     name   age   value   18     var arr2   new Array  name    childs   value   5     name   lang   value   German     var arr3       arr1     arr2     Output       arr3             name   lang   value   German            name   age   value   18            name   childs   value   5            name   lang   value   German

User · Answer

Here s a jQuery plugin that I wrote to merge two object arrays by a key  Keep in mind that this modifies the destination array in-place    x000D   x000D   function      x000D      extendObjectArray   function destArray  srcArray  key    x000D      for  var index   0  index  lt  srcArray length  index      x000D        var srcObject   srcArray index   x000D        var existObject   destArray filter function destObj    x000D          return destObj key      srcObject key   x000D            x000D        if  existObject length  gt  0    x000D          var existingIndex   destArray indexOf existObject 0    x000D            extend true  destArray existingIndex   srcObject   x000D          else   x000D          destArray push srcObject   x000D          x000D        x000D      return destArray  x000D       x000D     jQuery   x000D   x000D  var arr1     x000D      name   lang     value   English     x000D      name   age      value   18         x000D     x000D  var arr2     x000D      name   childs   value   5           x000D      name   lang     value   German     x000D     x000D  var arr3     extendObjectArray arr1  arr2   name    x000D   x000D  console log JSON stringify arr3  null  2    x000D   as-console-wrapper   top  0  max-height  100   important    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D      ES6 Version   function          extendObjectArray    destArr  srcArr  key    gt        srcArr forEach srcObj   gt   existObj   gt          if  existObj length              extend true  destArr destArr indexOf existObj 0     srcObj           else           destArr push srcObj                  destArr filter v   gt  v key      srcObj key          return destArr          jQuery

User · Answer

x000D   x000D  var arr1      name   lang   value   English       name   age   value   18      var arr2      name   childs   value   5       name   lang   value   German       function mergeArrayByProperty arr1  arr2  prop        var newArray           arr1 map item   gt                if  typeof  item prop        undefined                     var nItems   arr2 filter ni   gt    if  typeof  ni prop        undefined   amp  amp  ni prop      item prop   return ni                      if  nItems length  gt  0                        item   Object assign     item  nItems 0                                      return item                                var arr2nd   arr2 flatMap item   gt    return item prop          var arr1nd   arr1 flatMap item   gt    return item prop          var nonDupArr   arr2nd map p   gt    if  arr1nd includes p      false  return arr2 filter i2   gt    if  i2 prop      p  return Object assign     i2     0           return newArray concat nonDupArr  filter i  gt  if i     null return i     var arr   mergeArrayByProperty arr1  arr2   name    console log arr  x000D   x000D   x000D   I know this has been answered a lot  but I thought I would share  This finds the duplicate key in the first array and merges the second arrays object having the same key value  If no value is found in the second array  it uses the original object  As you can see  lang is only found once in the result set  having german for the value

User · Answer

you could use following function  const merge    a  b  key    id     gt    a filter elem   gt   b find subElem   gt  subElem key      elem key        concat b     and try  merge arr1  arr2   name

User · Answer

const extend   function  ls xs      yield  ls     yield  xs     console log      extend  1 2 3   4 5 6

User · Answer

Off the top of my head - try jquery extend  var arr3   jQuery extend arr1 arr2

User · Answer

Based on  YOU s answer but keeping the order   var arr3       for var i in arr1      var shared   false     for  var j in arr2         if  arr2 j  name    arr1 i  name               arr3 push arr1 j             shared   true             break              if  shared  arr3 push arr1 i      for var j in arr2      var shared   false     for  var i in arr1         if  arr2 j  name    arr1 i  name               shared   true             break              if  shared  arr3 push arr2 j     arr3   I know this solution is less efficient  but it s necessary if you want to keep the order and still update the objects

User · Answer

What about jQuery Merge   http   api jquery com jQuery merge   jsFiddle example here  http   jsfiddle net ygByD

[javascript] Merge 2 arrays of objects

Examples related to javascript

Examples related to jquery

Examples related to arrays