Replacing objects in array

Question

I have this javascript object   var arr1     id  124  name  qqq                 id  589  name  www                 id  45  name  eee                id  567  name  rrr     var arr2     id  124  name  ttt                 id  45  name  yyy      I need to replace objects in arr1 with items from arr2 with same id   So here is the result I want to get   var arr1     id  124  name  ttt                 id  589  name  www                 id  45  name  yyy                id  567  name  rrr      How can I implement it using javascript

User · Answer

I am only submitting this answer because people expressed concerns over browsers and maintaining the order of objects. I recognize that it is not the most efficient way to accomplish the goal.

Having said this, I broke the problem down into two functions for readability.

// The following function is used for each itertion in the function updateObjectsInArr
const newObjInInitialArr = function(initialArr, newObject) {
  let id = newObject.id;
  let newArr = [];
  for (let i = 0; i < initialArr.length; i++) {
    if (id === initialArr[i].id) {
      newArr.push(newObject);
    } else {
      newArr.push(initialArr[i]);
    }
  }
  return newArr;
};

const updateObjectsInArr = function(initialArr, newArr) {
    let finalUpdatedArr = initialArr;  
    for (let i = 0; i < newArr.length; i++) {
      finalUpdatedArr = newObjInInitialArr(finalUpdatedArr, newArr[i]);
    }

    return finalUpdatedArr
}

const revisedArr = updateObjectsInArr(arr1, arr2);

jsfiddle

User · Answer

Here a transparent approach  instead of an unreadable and undebuggable oneliner  export class List       static replace    object  list    gt            let newList               list forEach function  item                if  item id     object id                    newList push object                 else                   newList push item                                     return newList

User · Answer

What s wrong with Object assign target  source       Arrays are still type object in Javascript  so using assign should still reassign any matching keys parsed by the operator as long as matching keys are found  right

User · Answer

Thanks to ES6 we can made it with easy way - gt  for example on util js module        Merge 2 array of entity export const mergeArrays    arr1  arr2    gt      arr1  amp  amp  arr1 map obj   gt  arr2  amp  amp  arr2 find p   gt  p id     obj id     obj       gets 2 array and merges it    Arr1 is main array which is priority is high on merge process   Merge array with same type of entity export const mergeArrayWithObject    arr  obj    gt  arr  amp  amp  arr map t   gt  t id     obj id   obj   t       it merges the same kind of array of type with some kind of type  for  example  array of person - gt    id 1  name  quot Bir quot    id 2  name   quot Iki quot    id 3  name  quot Uc quot       second param Person  id 3  name   quot Name changed quot       result is   id 1  name  quot Bir quot    id 2  name   quot Iki quot    id 3  name  quot Name changed quot

User · Answer

Considering that the accepted answer is probably inefficient for large arrays  O nm   I usually prefer this approach  O 2n   2m   function mergeArrays arr1       arr2              Creates an object map of id to object in arr1     const arr1Map   arr1 reduce  acc  o    gt            acc o id    o          return acc                    Updates the object with corresponding id in arr1Map from arr2         creates a new object if none exists  upsert      arr2 forEach o   gt            arr1Map o id    o                 Return the merged values in arr1Map as an array     return Object values arr1Map      Unit test  it  Merges two arrays using id as the key        gt       var arr1     id  124  name  qqq     id  589  name  www     id  45  name  eee     id  567  name  rrr        var arr2     id  124  name  ttt     id  45  name  yyy        const actual   mergeArrays arr1  arr2      const expected     id  124  name  ttt     id  589  name  www     id  45  name  yyy     id  567  name  rrr        expect actual sort  a  b    gt   a id  lt  b id   -1  1   toEqual expected sort  a  b    gt   a id  lt  b id   -1  1

User · Answer

If you don t care about the order of the array  then you may want to get the difference between arr1 and arr2 by id using differenceBy   and then simply use concat   to append all the updated objects   var result     arr1  differenceBy arr2   id   concat arr2  value       x000D   x000D  var arr1      x000D    id   124   x000D    name   qqq  x000D       x000D    id   589   x000D    name   www  x000D       x000D    id   45   x000D    name   eee  x000D       x000D    id   567   x000D    name   rrr  x000D     x000D   x000D  var arr2      x000D    id   124   x000D    name   ttt  x000D       x000D    id   45   x000D    name   yyy  x000D      x000D   x000D  var result     arr1  differenceBy arr2   id   concat arr2  value    x000D   x000D  console log result   x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 13 1 lodash js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

This is how I do it in TypeScript   const index   this array indexOf this objectToReplace   this array index    newObject

User · Answer

function getMatch elem        function action ele  val            if ele     val                elem   arr2 i                         for  var i   0  i  lt  arr2 length  i              action elem id  Object values arr2 i   0              return elem     var modified   arr1 map getMatch

User · Answer

I went with this  because it makes sense to me  Comments added for readers    masterData     id  1  name   aaaaaaaaaaa              id  2  name   Bill             id  3  name   ccccccccc      updatedData     id  3  name   Cat                    id  1  name   Apple      updatedData forEach updatedObj  gt              For every updatedData object  dataObj   find the array index in masterData where the IDs match         let indexInMasterData   masterData map masterDataObj   gt  masterDataObj id  indexOf updatedObj id      First make an array of IDs  to use indexOf              If there is a matching ID  and thus an index   replace the existing object in masterData with the updatedData s object         if  indexInMasterData     undefined  masterData splice indexInMasterData  1  updatedObj           masterData becomes   id  1  name   Apple                             id  2  name   Bill                            id  3  name   Cat      as you want

User · Answer

Since you re using Lodash you could use   map and   find to make sure major browsers are supported   In the end I would go with something like    x000D   x000D  function mergeById arr    x000D    return   x000D      with  function arr2    x000D        return   map arr  item   gt    x000D          return   find arr2  obj   gt  obj id     item id     item x000D           x000D        x000D      x000D    x000D   x000D  var result   mergeById   id  124  name  qqq     x000D              id  589  name  www     x000D              id  45  name  eee    x000D              id  567  name  rrr     x000D       with   id  124  name  ttt     id  45  name  yyy     x000D   x000D  console log result   x000D   lt script src  https   raw githubusercontent com lodash lodash 4 13 1 dist lodash js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

You can use Array map with Array find   arr1 map obj   gt  arr2 find o   gt  o id     obj id     obj      x000D   x000D  var arr1      x000D      id   124   x000D      name   qqq  x000D       x000D      id   589   x000D      name   www  x000D       x000D      id   45   x000D      name   eee  x000D       x000D      id   567   x000D      name   rrr  x000D      x000D   x000D  var arr2      x000D      id   124   x000D      name   ttt  x000D       x000D      id   45   x000D      name   yyy  x000D      x000D   x000D  var res   arr1 map obj   gt  arr2 find o   gt  o id     obj id     obj   x000D   x000D  console log res   x000D   x000D   x000D    Here  arr2 find o   gt  o id     obj id  will return the element i e  object from arr2 if the id is found in the arr2  If not  then the same element in arr1 i e  obj is returned

[javascript] Replacing objects in array

Examples related to javascript

Examples related to lodash