React JS Sorting and Stacking list value

Question

Assume

const listA = [{"key":"apple", "value":100}, {"key":"banana", "value":50}, {"key":"pearl", "value":10}, {"key":"cherry", "value":5}, {"key":"kiwi", "value":3}]
const listB = [{"key":"peach", "value":30}, {"key":"apple", "value":15}, {"key":"kiwi", "value":10}, {"key":"mango", "value":5}]

As you can see, in the array it got each object pair with "key " and "value", I wish to stack up the value for the same key in new build list, the new build list also needs to be in desc order by value , e.g something like this ->

const listMerged = [{"key":"apple", "value":115}, {"key":"banana", "value":50} , {"key":"peach", "value":30}, {"key":"kiwi", "value":13}, {"key":"pearl", "value":10}, {"key":"cherry", "value":5}, {"key":"mango", "value":5}]

Just tried something like this ->

let newArr = listB.forEach((item) => {

  let ifElemPresentInListA = listA.findIndex((elem) => {
    return Object.keys(elem)[0] === Object.keys(item)[0]
  })

  if (ifElemPresentInListA === -1) {
    listA.push(item)
  } else {
    for (let keys in listA[ifElemPresentInListA]) {
      listA[ifElemPresentInListA][keys] += Object.values(item)[0]
    }
  }

})    

But result is a bit messed up

Would be really appricate if anyone could suggest better code example. Thanks

Answer 1

You can zip two arrays into object to sum values for matching keys and then create array from object back:

const listA = [{"key":"apple", "value":100}, {"key":"banana", "value":50}, {"key":"pearl", "value":10}, {"key":"cherry", "value":5}, {"key":"kiwi", "value":3}];
const listB = [{"key":"peach", "value":30}, {"key":"apple", "value":15}, {"key":"kiwi", "value":10}, {"key":"mango", "value":5}];

let result = [...listA, ...listB].reduce((acc, item) => {
  acc[item.key] = acc[item.key] ? acc[item.key] + item.value : item.value
  return acc;
}, {});

result = Object.entries(result)
  .map(([key, value]) => ({ key, value }))
  .sort((a, b) => b.value - a.value);

console.log(result);