How to convert deeply nested object structures containing arrays in JavaScript

Question

How to convert deeply nested object structures containing arrays in JavaScript

Despite the less-than-desirable name of this inquiry, the question is fairly straightforward. I have a particular object:

let test = {
  date1: [
    {
      time: 1,
      value: 5,
    },
    {
      time: 2,
      value: 6,
    },
  ],
  date2: [
    {
      time: 1,
      value: 20,
    },
    {
      time: 2,
      value: 10,
    },
  ],
};

I am looking to reformat it into something like this:

let result = {
  date1: {
    values: [5, 6],
    times: [1, 2],
  },
  date2: {
    values: [1, 2], // perhaps easier for summarization?!
    times: [10, 20],
  },
};

I am aiming to summarize the value data for each date. The idea is that having them in an array will simplify the summarization process. While aware of alternative methods (and open to exploring them), my current approach is falling short of my expectations. Here's what I have at the moment:

let keys = Object.keys(test);
let red = keys.reduce((acc, curr) => {
  return (acc[curr] = test[curr].map((e) => e.value));
}, {});

console.log(`red: `, red);

However, its output is as follows:

red: [ 20, 10 ]

javascript arrays ecmascript-6 reduce

Answer 1

Answer №1

This

return (acc[curr] = test[curr].map((e) => e.value));

is the same as

acc[curr] = test[curr].map((e) => e.value);
return acc[curr];

accessing a nested key of the accumulator during each iteration - this is not the desired logic. To prevent previously assigned values from being lost and to account for both the time and value properties of the array being iterated over, you need to return the entire accumulator on a separate line. Additionally, your => e.value only extracts one of the two properties you require.

let test = {
  date1: [
    {
      time: 1,
      value: 5,
    },
    {
      time: 2,
      value: 6,
    },
  ],
  date2: [
    {
      time: 1,
      value: 20,
    },
    {
      time: 2,
      value: 10,
    },
  ],
};

const keys = Object.keys(test);
const result = keys.reduce((acc, key) => {
  acc[key] = {
    values: test[key].map(({ value }) => value),
    times: test[key].map(({ time }) => time),
  };
  return acc;
  return acc;
}, {});

console.log(result);

or alternatively

let test = {
  date1: [
    {
      time: 1,
      value: 5,
    },
    {
      time: 2,
      value: 6,
    },
  ],
  date2: [
    {
      time: 1,
      value: 20,
    },
    {
      time: 2,
      value: 10,
    },
  ],
};

const result = Object.fromEntries(
  Object.entries(test).map(([key, arr]) => [
    key,
    {
      values: arr.map(({ value }) => value),
      times: arr.map(({ time }) => time),
    }
  ])
);
console.log(result);

Answer 2

This

return (acc[curr] = test[curr].map((e) => e.value));

is the same as

acc[curr] = test[curr].map((e) => e.value);
return acc[curr];

accessing a nested key of the accumulator during each iteration - this is not the desired logic. To prevent previously assigned values from being lost and to account for both the time and value properties of the array being iterated over, you need to return the entire accumulator on a separate line. Additionally, your => e.value only extracts one of the two properties you require.

let test = {
  date1: [
    {
      time: 1,
      value: 5,
    },
    {
      time: 2,
      value: 6,
    },
  ],
  date2: [
    {
      time: 1,
      value: 20,
    },
    {
      time: 2,
      value: 10,
    },
  ],
};

const keys = Object.keys(test);
const result = keys.reduce((acc, key) => {
  acc[key] = {
    values: test[key].map(({ value }) => value),
    times: test[key].map(({ time }) => time),
  };
  return acc;
  return acc;
}, {});

console.log(result);

or alternatively

let test = {
  date1: [
    {
      time: 1,
      value: 5,
    },
    {
      time: 2,
      value: 6,
    },
  ],
  date2: [
    {
      time: 1,
      value: 20,
    },
    {
      time: 2,
      value: 10,
    },
  ],
};

const result = Object.fromEntries(
  Object.entries(test).map(([key, arr]) => [
    key,
    {
      values: arr.map(({ value }) => value),
      times: arr.map(({ time }) => time),
    }
  ])
);
console.log(result);

Answer 3

Answer №2

Here's a slight variation you could try out:

const transformedData = Object.keys(data).reduce((acc, key) => {
        data[key].forEach((item) => {
            acc.push({
            date: key,
            time: item.time,
            value: item.value,
            });
        });
        return acc;
    }, []);
    console.log(transformedData);

Answer 4

Here's a slight variation you could try out:

const transformedData = Object.keys(data).reduce((acc, key) => {
        data[key].forEach((item) => {
            acc.push({
            date: key,
            time: item.time,
            value: item.value,
            });
        });
        return acc;
    }, []);
    console.log(transformedData);

Answer 5

Answer №3

If all the inner objects share the same keys and there are no empty date arrays:

const sampleData = {date1:[{time:1,value:5},{time:2,value:6},],date2:[{time:1,value:20},{time:2,value:10},]};

let dates = Object.keys(sampleData);
let transformedData = dates.reduce((acc, current) => ({
  ...acc,
  [current]: Object.keys(sampleData[current][0])
                .reduce((acc, key) => ({
                  ...acc,
                  [key + 's']: sampleData[current].map(obj => obj[key])
                }), {})
}), {});

console.log(`Transformed data: `, transformedData);

Answer 6

If all the inner objects share the same keys and there are no empty date arrays:

const sampleData = {date1:[{time:1,value:5},{time:2,value:6},],date2:[{time:1,value:20},{time:2,value:10},]};

let dates = Object.keys(sampleData);
let transformedData = dates.reduce((acc, current) => ({
  ...acc,
  [current]: Object.keys(sampleData[current][0])
                .reduce((acc, key) => ({
                  ...acc,
                  [key + 's']: sampleData[current].map(obj => obj[key])
                }), {})
}), {});

console.log(`Transformed data: `, transformedData);

Answer 7

Answer №4

If you're looking to sum up values from different objects without the need for creating arrays first, there's a more efficient approach you can take. Here's what your end result might look like:

{
  date1: 11,
  date2: 30
}

While using reduce is a good start for summing up values, you can further enhance your code by incorporating Object.entries and Object.fromEntries. This will enable you to create the desired object structure more effectively:

const test = {date1: [{time: 1,value: 5,},{time: 2,value: 6,},],date2: [{time: 1,value: 20,},{time: 2,value: 10,},],};

const result = Object.fromEntries(
    Object.entries(test).map(([key, arr]) => 
        [key, arr.reduce((sum, {value}) => sum + value, 0)]
    )
);

console.log(result);

Answer 8

If you're looking to sum up values from different objects without the need for creating arrays first, there's a more efficient approach you can take. Here's what your end result might look like:

{
  date1: 11,
  date2: 30
}

While using reduce is a good start for summing up values, you can further enhance your code by incorporating Object.entries and Object.fromEntries. This will enable you to create the desired object structure more effectively:

const test = {date1: [{time: 1,value: 5,},{time: 2,value: 6,},],date2: [{time: 1,value: 20,},{time: 2,value: 10,},],};

const result = Object.fromEntries(
    Object.entries(test).map(([key, arr]) => 
        [key, arr.reduce((sum, {value}) => sum + value, 0)]
    )
);

console.log(result);

How to convert deeply nested object structures containing arrays in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Hide the selection box when hovering over the Div

Using Java beans to present form data utilizing session

What method can I use to ensure that the sidebar stays fixed at a particular div as the user continues to scroll down the

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Error Encountered While Creating a Polygon Wallet on Fireblocks

Is there a way to retrieve the headers from an HTTP response in JavaScript that wasn't initiated by an AJAX request?

submitting URL from dropdown menu without using the 'submit' button

Guide on how to switch a class on the body using React's onClick event

Enhancing Typography in Material UI with Custom Breakpoints in React CustomThemes

What is the best way to remove a specific item from a list of maps in DynamoDB based on a particular attribute value within the

The Chrome file storage system saves information in files

Investigate the presence of a vertical scrollbar using JQuery or JavaScript

Create an Array with a dynamic name derived from the values of other variables

Numerous instances of Codemirror

I'm having trouble getting this angular expression to cooperate in Plunker. Can anyone shed some light on why {{ 843 / 42

Utilize an imported function within a React component's return statement to avoid an invalid hook call issue

Executing API call utilizing the Request module within a node.js application

Obtaining the attribute value of a disabled element in an Angular JS application

transmitting error messages from a service to a controller in AngularJS

Encountered an Error: Trying to use a function that is undefined - While utilizing Jquery Tabs