Convert an array of objects into an array of objects with combined values

Question

Convert an array of objects into an array of objects with combined values

Here is an example of an array containing objects:

 array = [
{prop1: 'teste1', prop2: 'value1', prop3: 'anotherValue1' },
{prop1: 'teste2', prop2: 'value2', prop3: 'anotherValue2' },
{prop1: 'teste3', prop2: 'value3', prop3: 'anotherValue3' }

]

I am looking to transform this array into a new format like below:

[
   {prop1:['teste1', 'teste2', 'teste3']},
   {prop2:['value1', 'value2', 'value3']},
   {prop3:['anotherValue1', 'anotherValue2', 'anotherValue3']}
]

javascript

Answer 1

Answer №1

To retrieve the keys from the first object in the array, you can use the Object.keys method on array[0]. Then, you can leverage the map function to create a new object with these keys and apply the spread operator along with the reduce method to merge the previous and current values in your array.

const myArray = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Sarah', age: 25, city: 'San Francisco' },
  { name: 'Mike', age: 35, city: 'Chicago' }
];

 const transformedArray = Object.keys(myArray[0]).map(key => ({
    [key]: myArray.map(obj => obj[key])
 }));

console.log(transformedArray)

Answer 2

To retrieve the keys from the first object in the array, you can use the Object.keys method on array[0]. Then, you can leverage the map function to create a new object with these keys and apply the spread operator along with the reduce method to merge the previous and current values in your array.

const myArray = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Sarah', age: 25, city: 'San Francisco' },
  { name: 'Mike', age: 35, city: 'Chicago' }
];

 const transformedArray = Object.keys(myArray[0]).map(key => ({
    [key]: myArray.map(obj => obj[key])
 }));

console.log(transformedArray)

Answer 3

Answer №2

const data = [{
  name: 'John',
  age: 30,
  city: 'New York'
}, {
  name: 'Jane',
  age: 25,
  city: 'Los Angeles'
}, {
  name: 'Alice',
  age: 35,
  city: 'Chicago'
}];

const output = Object.values(data.reduce((acc, obj) => {
  Object.entries(obj).forEach(([key, value]) => {
    acc[key] = acc[key] || {
      [key]: []
    };
    acc[key][key].push(value);
  });
  return acc;
}, {}));

console.log(output);

You can utilize the reduce method to obtain the desired outcome.

Answer 4

const data = [{
  name: 'John',
  age: 30,
  city: 'New York'
}, {
  name: 'Jane',
  age: 25,
  city: 'Los Angeles'
}, {
  name: 'Alice',
  age: 35,
  city: 'Chicago'
}];

const output = Object.values(data.reduce((acc, obj) => {
  Object.entries(obj).forEach(([key, value]) => {
    acc[key] = acc[key] || {
      [key]: []
    };
    acc[key][key].push(value);
  });
  return acc;
}, {}));

console.log(output);

You can utilize the reduce method to obtain the desired outcome.

Answer 5

Answer №3

One approach is to group the entries by key and create an object from those entries to form the result set.

const
    data = [{ prop1: 'test1', prop2: 'value1', prop3: 'anotherValue1' }, { prop1: 'test2', prop2: 'value2', prop3: 'anotherValue2' }, { prop1: 'test3', prop2: 'value3', prop3: 'anotherValue3' }],
    result = Object
        .entries(data.reduce((r, o) => {
            Object.entries(o).forEach(([k, v]) => (r[k] ??= []).push(v));
            return r;
        }, {}))
        .map(p => Object.fromEntries([p]));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 6

One approach is to group the entries by key and create an object from those entries to form the result set.

const
    data = [{ prop1: 'test1', prop2: 'value1', prop3: 'anotherValue1' }, { prop1: 'test2', prop2: 'value2', prop3: 'anotherValue2' }, { prop1: 'test3', prop2: 'value3', prop3: 'anotherValue3' }],
    result = Object
        .entries(data.reduce((r, o) => {
            Object.entries(o).forEach(([k, v]) => (r[k] ??= []).push(v));
            return r;
        }, {}))
        .map(p => Object.fromEntries([p]));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 7

Answer №4

Within this scenario, the initial loop will cycle through all the keys while the subsequent loop will iterate over every object associated with that specific key.

const array1 = [
    {prop1: 'test1', prop2: 'value1', prop3: 'anotherValue1' },
    {prop1: 'test2', prop2: 'value2', prop3: 'anotherValue2' },
    {prop1: 'test3', prop2: 'value3', prop3: 'anotherValue3' }
]

let array2 = []
Object.keys(array1[0]).forEach(function(data){
    let obj = {};
    obj[data] = []
    array1.forEach(item => obj[data].push(item[data]))

    array2.push(obj)
})

console.log(array2)

Answer 8

Within this scenario, the initial loop will cycle through all the keys while the subsequent loop will iterate over every object associated with that specific key.

const array1 = [
    {prop1: 'test1', prop2: 'value1', prop3: 'anotherValue1' },
    {prop1: 'test2', prop2: 'value2', prop3: 'anotherValue2' },
    {prop1: 'test3', prop2: 'value3', prop3: 'anotherValue3' }
]

let array2 = []
Object.keys(array1[0]).forEach(function(data){
    let obj = {};
    obj[data] = []
    array1.forEach(item => obj[data].push(item[data]))

    array2.push(obj)
})

console.log(array2)

Convert an array of objects into an array of objects with combined values

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is the JavaScript Base64 image data damaged or compromised?

Ensuring Secure API Request Distribution

Is it possible to utilize Angular's $http.get method with a dynamic route

Unable to trap error using try-catch block within an asynchronous function

Click to shift the div downwards

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

Tips for efficiently moving through divs in a personalized single page application?

Update HTML element using Jquery periodically

Angular is throwing an error because it cannot find the definition for

Retrieving data from a remote PHP server using JavaScript

Display loading spinners for multiple ajax requests

What is the best way to verify the presence of # in a URL?

Before clicking the submit button, send field values using Ajax

Bing Translator and XMLHttpRequest are two powerful tools for translating and

What is the process for verifying a particular user in AngularJS?

Issue with multiple dropdown menus not closing when clicked on

Tips on leveraging dynamic queries in your REST API usage

To ensure the smooth functioning of a React application running on a Docker container in Ubuntu 16.04, it is

The jsPDF tool captures only the visible frame in a screenshot instead of printing the entire content on the screen

Extension for Firefox: Unable to access variables or functions from the movie_player element on YTMusic