ecmascript 6 - Merge two complex arrays of objects by field in javascript

Question

I am grouping objects retrieved from my database in an array by a field. As I am using pagination, the new grouped array has to be merged with the previous one.

For example, if I had this array

const previousGroupedFood = [
  {
    type: "fruits",
    data: [{ name: "Orange", color: "orange" }, { name: "Apple", color: "red" }]
  },
  {
    type: "drinks",
    data: [ { name: "Coke Zero", calories: 0 } ]
  }    
];

and after fetching my database again and merging the result I get

const newGroupedFood = [
  {
    type: "fruits",
    data: [{ name: "Tomato", color: "red" }]
  },
  {
    type: "desserts",
    data: [ { name: "Lemon Tart", calories: 430 } ]
  }    
]

How can I merge both arrays using ES6? So I get this result?

[
  {
    type: "fruits",
    data: [{ name: "Orange", color: "orange" }, { name: "Apple", color: "red" }, { name: "Tomato", color: "red" }]
  },
  {
    type: "drinks",
    data: [{ name: "Coke Zero", calories: 0 }]
  },
  {
    type: "desserts", // No lexical order, pushing in the tail of the list
    data: [{ name: "Lemon Tart", calories: 430 }]
  }
];

Answer 1

you can try this

const previousGroupedFood = [{
    type: "fruits",
    data: [{
      name: "Orange",
      color: "orange"
    }, {
      name: "Apple",
      color: "red"
    }]
  },
  {
    type: "drinks",
    data: [{
      name: "Coke Zero",
      calories: 0
    }]
  }
];

const newGroupedFood = [{
    type: "fruits",
    data: [{
      name: "Tomato",
      color: "red"
    }]
  },
  {
    type: "desserts",
    data: [{
      name: "Lemon Tart",
      calories: 430
    }]
  }
];

newGroupedFood.forEach(item => {
  const match = previousGroupedFood.find(({type}) => type === item.type);
  if (match) {
    match.data = [...match.data,...item.data];
  } else {
    previousGroupedFood.push(item);
  }
});

console.log(previousGroupedFood);