I need help for merging values in object array - Javascript

Question

I am working with one project , I have the data comes to me as Object Array and I need to combine the same keys in one key and make the value as an array of strings.

here is the data I have :

 inputArray = [
    {
      colors: 'Red',
      size: 'Small'
    },
    {
      colors: 'Blue',
      size: 'Large'
    },
    {
      colors: 'Red',
      size: 'Large'
    },
    {
      colors: 'Pink',
      size: 'X-Large'
    }
  ]

and here is the required output :

 outputArray = {
    colors: ['Red','Blue','Pink'],
    size: ['Large','X-large','Small']
  }

Answer 1

You could use a simple dictionary structure to do this. And verify if every element already exists before adding it to array.

const outputArray = {
  colors: [],
  size: [],
};

for (elem of inputArray) {
  if (!outputArray['colors'].includes(elem.colors)) {
    outputArray['colors'].push(elem.colors);
  }

  if (!outputArray['size'].includes(elem.size)) {
    outputArray['size'].push(elem.size);
  }
}

which will give

{
   colors: [ 'Red', 'Blue', 'Pink' ],
   size: [ 'Small', 'Large', 'X-Large' ]
}

Answer 2

it's a basic one...

 const inputArray = [ { colors: 'Red', size: 'Small' } , { colors: 'Blue', size: 'Large' } , { colors: 'Red', size: 'Large' } , { colors: 'Pink', size: 'X-Large'} ]; outputArray = inputArray.reduce((a,c)=> { if (!a.colors.includes(c.colors) ) a.colors.push( c.colors); if (!a.size.includes(c.size) ) a.size.push( c.size); return a } ,{ colors:[], size:[]}) ; console.log (outputArray )

[edit] if you do not know the variety of entry keys, you can use:

 inputArray = [ { colors: 'Red', size: 'Small' } , { colors: 'Blue', size: 'Large' } , { colors: 'Red', size: 'Large' } , { colors: 'Pink', size: 'X-Large', truc: 'bidule' } ]; outputArray = inputArray.reduce((a,c)=> { for (let key in c) { if (!a[key]) a[key] = [] if (!a[key].includes(c.colors) ) a[key].push( c[key]) } return a } ,{}) ; console.log (outputArray)

Answer 3

This seems to work...

let inputArray = [
    {
      colors: 'Red',
      size: 'Small'
    },
    {
      colors: 'Blue',
      size: 'Large'
    },
    {
      colors: 'Red',
      size: 'Large'
    },
    {
      colors: 'Pink',
      size: 'X-Large'
    }
  ]
let outputArray = [{colors: [], size: []}]
for (let i = 0; i<inputArray.length; i++){
  outputArray[0].colors.push(inputArray[i].colors)
  outputArray[0].size.push(inputArray[i].size)
}
console.log(outputArray)

Is this what you were after?

Answer 4

While this is not logically much different from the second part of the answer by Mister Jojo, it does the same thing without any mutations, in perhaps a more functional manner:

 const gather = (xs) => xs .reduce ( (a, x) => Object .entries (x) .reduce ((a, [k, v]) => ({...a, [k]: (a[k] || []).concat(v)}), a), {} ) const inputArray = [{ colors: 'Red', size: 'Small'}, {colors: 'Blue', size: 'Large'}, {colors: 'Red', size: 'Large'}, {colors: 'Pink', size: 'X-Large'}] console .log (gather (inputArray))

It is likely less performant than that version, for reasons described by Rich Snapp , but in practice I haven't seen this being a real issue.