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']
  }

Please give us more details on what you need help with, especially samples of what you've tried and where you've gone wrong. As it stands this is a code request, not a question. — Sterling Archer
– Sterling Archer, Commented Mar 3, 2020 at 17:32
inputArray = [ { color: 'Red', size: 'small', brand: 'AVC' }, { matrial: 'silk', size: 'large', print: 'logo' }, { color: 'black', size: 'small', material: 'cotton' }, { color: 'Blue', brand: 'ABC', shaded: '50%' } ]; output = { color: ['Red', 'black', 'Blue'], matrial: ['silk', 'cotton'], size: ['small', 'large'], brand: ['ABC', 'AVC'], print: ['logo'], shaded: ['50%'] } — Mohamed Maher
– Mohamed Maher, Commented Mar 3, 2020 at 18:49

Diego Ferreira · Accepted Answer · 2020-03-03 17:55:39Z

2

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' ]
}

answered Mar 3, 2020 at 17:55

Diego Ferreira

701 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mister Jojo · Accepted Answer · 2020-03-03 18:04:32Z

1

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)

edited Mar 3, 2020 at 18:04

answered Mar 3, 2020 at 17:41

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

4 Comments

Mohamed Maher Over a year ago

But actually the array key is varied from respond to others not every time will be colors and sizes may change for other keys ...

Mohamed Maher Over a year ago

I am really sorry ... I am trying to make the question more clearer but maybe I can't ,, thank you anyway ...

Mister Jojo Over a year ago

@MohamedMaher I have added a second answer that could be more on your question?

Mohamed Maher Over a year ago

It works but there is an error comes here ... if (!a[key].includes(c.colors) ) a[key].push( c[key])

Paul Martin · Accepted Answer · 2020-03-03 17:44:43Z

0

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?

answered Mar 3, 2020 at 17:44

Paul Martin

4693 silver badges9 bronze badges

Comments

Scott Sauyet · Accepted Answer · 2020-03-03 18:45:33Z

0

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.

answered Mar 3, 2020 at 18:45

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

Collectives™ on Stack Overflow

I need help for merging values in object array - Javascript

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related