Combining and Converting Arrays of Objects in JavaScript

Question

Combining and Converting Arrays of Objects in JavaScript

I'm facing a problem with two arrays of objects structured like this...

const planned = [
    {
        '2023-01-06': 46,
        '2023-01-04': 45,
        '2023-01-05': 43,
        '2023-01-07': 53
    }
]
const actual =[
    {
        "2023-01-07": 12,
        "2023-01-06": 16,
        "2023-01-04": 14,
        "2023-01-08": 10,
        "2023-01-05": 12,
        "2023-01-03": 10
    }
]

I want to merge them into a single array of objects separating the date and its corresponding value. This is how I expect the final array to look:

const transformed =  [{
    date:"2023-01-03",
    actual:10,
    planned:0,
  },{
    date:"2023-01-05",
    actual:10,
    planned:5,
  },{
    date:"2023-01-06",
    actual:16,
    planned:46,
  },....

] I've tried coming up with a solution, but I'm struggling with the logic... Can anyone provide me with some guidance on how to tackle this? Is there a way to utilize the reduce prototype array or any other built-in methods for this task? Any assistance would be greatly appreciated.

javascript arrays object

Answer 1

Answer №1

One strategy to tackle this issue involves manipulating arrays and converting them into a flat map. This transformation allows for the creation of the desired output.

const planned = [
    {
        "2023-01-06": 46,
        "2023-01-04": 45,
        "2023-01-05": 43,
        "2023-01-07": 53,
    },
];
const actual = [
    {
        "2023-01-07": 12,
        "2023-01-06": 16,
        "2023-01-04": 14,
        "2023-01-08": 10,
        "2023-01-05": 12,
        "2023-01-03": 10,
    },
];

const convertToMap = (list) =>
    list.reduce((acc, curr) => ({ ...acc, ...curr }), {});

const actualStats = convertToMap(actual);
const plannedStats = convertToMap(planned);

const dates = [
    ...new Set([...Object.keys(actualStats), ...Object.keys(plannedStats)]),
];

const transformed = dates.map((date) => ({
    date,
    planned: plannedStats[date] || 0,
    actual: actualStats[date] || 0,
}));

console.log(transformed);

Answer 2

One strategy to tackle this issue involves manipulating arrays and converting them into a flat map. This transformation allows for the creation of the desired output.

const planned = [
    {
        "2023-01-06": 46,
        "2023-01-04": 45,
        "2023-01-05": 43,
        "2023-01-07": 53,
    },
];
const actual = [
    {
        "2023-01-07": 12,
        "2023-01-06": 16,
        "2023-01-04": 14,
        "2023-01-08": 10,
        "2023-01-05": 12,
        "2023-01-03": 10,
    },
];

const convertToMap = (list) =>
    list.reduce((acc, curr) => ({ ...acc, ...curr }), {});

const actualStats = convertToMap(actual);
const plannedStats = convertToMap(planned);

const dates = [
    ...new Set([...Object.keys(actualStats), ...Object.keys(plannedStats)]),
];

const transformed = dates.map((date) => ({
    date,
    planned: plannedStats[date] || 0,
    actual: actualStats[date] || 0,
}));

console.log(transformed);

Combining and Converting Arrays of Objects in JavaScript

Answer №1

Similar questions

An issue encountered with res.download() following res.render() in Node.js

Improper height of MathJax in the div element

Failed to fully install all dependencies for my project with yarn install

Error: Attempting to access the 'style' property of a non-existent element

Set the height of the document body to be "100%" using the style property

In Angular JS pagination, the previous filter value is stored in $LocalStorage for future reference

FancyBox: Struggling to adjust dimensions accurately

JavaScript Code: Empty a text box when a different one is active

What's preventing the bind click event from working properly?

Manipulate the contents of an HTML class using Javascript to substitute text with an empty string

Using a Svelte click event to toggle a boolean value in an array from a div

Getting access to scope variables in an Angular controller written in ES6 style can be achieved by using

Effective sparse translation between whole numbers

Encountering a compilation error when implementing ActionReducerMap in combination with StoreModule.forFeature

Is there a way to ensure my Vue variable is declared once the page has fully loaded?

I found myself unable to navigate the web page through scrolling

What is the method for transforming latitude and longitude coordinates into a physical address for a website?

What is the process of extracting a value from an array of objects based on another parameter?

The HTML code for the base64 image conversion failed to load

Mongoose doesn't support saving extensive text-data