Struggling with consolidating values in an array of objects - seeking assistance with Javascript

Question

Struggling with consolidating values in an array of objects - seeking assistance with Javascript

Currently, I am handling a project where I receive data in the form of an Object Array. My task is to merge values with the same key into one key and convert the values into an array of strings.

Below is the sample data I am working with:

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

Here is the desired output :

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

javascript typescript

Answer 1

Answer №1

To achieve this, you can utilize a basic dictionary structure. It is important to check if each element already exists before adding it to the array.

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

for (element of inputData) {
  if (!resultArray['colors'].includes(element.colors)) {
    resultArray['colors'].push(element.colors);
  }

  if (!resultArray['size'].includes(element.size)) {
    resultArray['size'].push(element.size);
  }
}

This will result in

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

Answer 2

To achieve this, you can utilize a basic dictionary structure. It is important to check if each element already exists before adding it to the array.

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

for (element of inputData) {
  if (!resultArray['colors'].includes(element.colors)) {
    resultArray['colors'].push(element.colors);
  }

  if (!resultArray['size'].includes(element.size)) {
    resultArray['size'].push(element.size);
  }
}

This will result in

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

Answer 3

Answer №2

It's a simple solution...

const inputArray = 
  [ { genre: 'Action',  rating: 'PG-13'  } 
  , { genre: 'Drama', rating: 'R'  } 
  , { genre: 'Fantasy',  rating: 'PG-13'  } 
  , { genre: 'Sci-Fi', rating: 'G'} 
  ];
outputArray = inputArray.reduce((a,c)=>
  {
  if (!a.genre.includes(c.genre) )  a.genre.push( c.genre);
  if (!a.rating.includes(c.rating) )      a.rating.push( c.rating);
  return a
  }
  ,{ genre:[], rating:[]})
  ;
console.log (outputArray )

[edit] If you are unsure about the types of input keys, you can use:

inputArray = 
  [ { genre: 'Action',  rating: 'PG-13'  } 
  , { genre: 'Drama', rating: 'R'  } 
  , { genre: 'Fantasy',  rating: 'PG-13'  } 
  , { genre: 'Sci-Fi', rating: 'G', extra: 'info' } 
  ];
outputArray = inputArray.reduce((a,c)=>
  {
  for (let key in c)
    {
    if (!a[key]) a[key] = []
    if (!a[key].includes(c.genre) )  a[key].push( c[key])
    }
  return a
  } ,{})
  ;
console.log (outputArray)

Answer 4

It's a simple solution...

const inputArray = 
  [ { genre: 'Action',  rating: 'PG-13'  } 
  , { genre: 'Drama', rating: 'R'  } 
  , { genre: 'Fantasy',  rating: 'PG-13'  } 
  , { genre: 'Sci-Fi', rating: 'G'} 
  ];
outputArray = inputArray.reduce((a,c)=>
  {
  if (!a.genre.includes(c.genre) )  a.genre.push( c.genre);
  if (!a.rating.includes(c.rating) )      a.rating.push( c.rating);
  return a
  }
  ,{ genre:[], rating:[]})
  ;
console.log (outputArray )

[edit] If you are unsure about the types of input keys, you can use:

inputArray = 
  [ { genre: 'Action',  rating: 'PG-13'  } 
  , { genre: 'Drama', rating: 'R'  } 
  , { genre: 'Fantasy',  rating: 'PG-13'  } 
  , { genre: 'Sci-Fi', rating: 'G', extra: 'info' } 
  ];
outputArray = inputArray.reduce((a,c)=>
  {
  for (let key in c)
    {
    if (!a[key]) a[key] = []
    if (!a[key].includes(c.genre) )  a[key].push( c[key])
    }
  return a
  } ,{})
  ;
console.log (outputArray)

Answer 5

Answer №3

It appears to be functioning...

let data = [
    {
      color: 'Green',
      size: 'Medium'
    },
    {
      color: 'Purple',
      size: 'Small'
    },
    {
        color: 'Blue',
        size: 'Medium'
    },
    {
        color: 'Yellow',
        size: 'Large'
    }
]

let result = [{color: [], size: []}]
for (let i = 0; i<data.length; i++){
  result[0].color.push(data[i].color)
  result[0].size.push(data[i].size)
}
console.log(result)

Does this meet your expectations?

Answer 6

It appears to be functioning...

let data = [
    {
      color: 'Green',
      size: 'Medium'
    },
    {
      color: 'Purple',
      size: 'Small'
    },
    {
        color: 'Blue',
        size: 'Medium'
    },
    {
        color: 'Yellow',
        size: 'Large'
    }
]

let result = [{color: [], size: []}]
for (let i = 0; i<data.length; i++){
  result[0].color.push(data[i].color)
  result[0].size.push(data[i].size)
}
console.log(result)

Does this meet your expectations?

Answer 7

Answer №4

Although similar to the second part of Mister Jojo's answer, this approach achieves the same result without any mutations, potentially making it more functional:

const groupBy = (items) =>
  items.reduce(
    (acc, item) => Object.entries(item).reduce((acc, [key, value]) => ({...acc, [key]: (acc[key] || []).concat(value)}), acc),
    {}
  )

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

console.log(groupBy(dataArray))

Although possibly less efficient than the aforementioned version, as explained by Rich Snapp, in practice, this has not proved to be a significant issue.

Answer 8

Although similar to the second part of Mister Jojo's answer, this approach achieves the same result without any mutations, potentially making it more functional:

const groupBy = (items) =>
  items.reduce(
    (acc, item) => Object.entries(item).reduce((acc, [key, value]) => ({...acc, [key]: (acc[key] || []).concat(value)}), acc),
    {}
  )

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

console.log(groupBy(dataArray))

Although possibly less efficient than the aforementioned version, as explained by Rich Snapp, in practice, this has not proved to be a significant issue.

Struggling with consolidating values in an array of objects - seeking assistance with Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to navigate through textarea components within an iframe tag

The correct method for concealing components from unauthorized users in Vue

Unveiling the Ultimate Method to Package Angular 2 Application using SystemJS and SystemJS-Builder

Installing Eclipse for PHP and JavaScript on your computer is a simple process. Here

Vue.js data does not exhibit reactivity

Playing with Data in AG-Grid using Javascript

How can I configure AngularJS intellisense in Visual Studio Code?

When the enter key is pressed, scope.$watch() does not trigger, and location.path does not function as expected

The function Router.use is looking for a middleware function, but instead received an object in node.js /

The continuous re-rendering is being triggered by the Async/Await Function

How to display the compilation date in npm

Having trouble with a lengthy formula in your Google Sheets Apps Script function? You may encounter an error like `SyntaxError: missing ) after argument list line: 14 file: new line.gs`. Let

tips for extracting data from a json array

jQuery template does not respond to input text when a click event is enabled on an iPhone device

Unique text: "Singleton React component"

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Attempting to iterate over elements within an object labeled as strIngredients 1-15

The feature to prevent multiple selections in JSTree is not functioning as expected

Enhancing AngularJs code effectiveness through the use of MVC framework

Are toggle functionalities triggered when an element is clicked?