ImmutableJS: Merge Two List Of Objects, Without Duplicating Them

Supposing I have the below: var allFoods = Immutable.List(); var frenchFood = Immutable.List([ { 'type': 'french fries', 'price': 3 }, { 'type': 'petit gateau',

Solution 1:

const allFoods = frenchFood.concat(fastFood.filter((item) =>
   frenchFood.indexOf(item) < 0
));

Solution 2:

I would use reduce

var result = frenchFood.concat(fastFood).reduce( (reduction, food) =>  { 
if(reduction[food.type]) {
    return reduction;
}  else { 
    return reduction.set([food.type], food);

}  
}, new Immutable.Map()).valueSeq().toList();

Solution 3:

I would highly encourage you to not nest js objects inside immutable structures. Better to wrap those objects in an Immutable.Map() or do Immutable.fromJS(yourJsObj).

Least amount of code

const results = Immutable.Set(frenchFood).union(Immutable.Set(fastFood));

However @rooftop answer fastest

https://jsperf.com/union-vs-concat-immutable

Solution 4:

I found a best solution (for me) on medium, link to origin answer is dead: https://medium.com/@justintulk/merging-and-deduplicating-data-arrays-with-array-reduce-efaa4d7ef7b0

const arr1 = [
  { id: 1, name: 'Array 1-1' },
  { id: 2, name: 'Array 1-2' },
  { id: 3, name: 'Array 1-3' }
]
const arr2 = [
  { id: 1, name: 'Array 2-1' },
  { id: 3, name: 'Array 2-3' },
  { id: 4, name: 'Array 2-4' }
]

const mergeArrObjectsUnique = (currentArr, newArr) => {
  let obj = {}

  currentArr.forEach(item => {
    obj[item.id] = item
  })
  
  newArr.forEach(item => {
    obj[item.id] = item
  })
  
  let result = [];
  
  for(let p in obj) {
    if(obj.hasOwnProperty(p))
    result.push(obj[p])
  }

  console.log('result: ', result)
  return result
}

mergeArrObjectsUnique(arr1, arr2)