Changing an array of object arrays into a consolidated array in JavaScript

Question

Changing an array of object arrays into a consolidated array in JavaScript

I am working with an array of objects that contain nested arrays.

 const arr =  [
    {
        JUNE: [
            {
                "iD": "67854",
                "event": " closed",
                "title": "test",
                "startDate": "2024-06-20",
                "endDate": "2024-07-25"
            }
        ]
    },
    {
        MAY: [
            {
                "ID": "908765",
                "event": "closed",
                "title": "test",
                "startDate": "2024-05-21",
                "endDate": "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            }
        ]
    }
]

I require the following output:

   [
    {
        ID: "67854",
        event: "closed",
        title: "test",
        startDate: "2024-06-20",
        endDate: "2024-07-25"
    },
    {
        ID: "908765",
        event: "closed",
        title: "test",
        startDate: "2024-05-21",
        endDate: "2024-06-27"
    },
    {
        ID: "12345",
        event: "open",
        title: "test123",
        startDate: "2024-05-21",
        endDate: "2024-06-27"
    }

]

javascript arrays object

Answer 1

Answer №1

Use <code>arr.flatMap(Object.values).flat()

to efficiently achieve the desired outcome.

const arr = [{JUNE: [{"iD": "67854", "event": " closed", "title": "test", "startDate": "2024-06-20", "endDate": "2024-07-25" } ] }, {MAY: [{"ID": "908765", "event": "closed", "title": "test", "startDate": "2024-05-21", "endDate": "2024-06-27" }, {ID: "12345", event: "open", title: "test123", startDate: "2024-05-21", endDate: "2024-06-27" } ] } ];

const result = arr.flatMap(Object.values).flat();

console.log(result)

Answer 2

Use <code>arr.flatMap(Object.values).flat()

to efficiently achieve the desired outcome.

const arr = [{JUNE: [{"iD": "67854", "event": " closed", "title": "test", "startDate": "2024-06-20", "endDate": "2024-07-25" } ] }, {MAY: [{"ID": "908765", "event": "closed", "title": "test", "startDate": "2024-05-21", "endDate": "2024-06-27" }, {ID: "12345", event: "open", title: "test123", startDate: "2024-05-21", endDate: "2024-06-27" } ] } ];

const result = arr.flatMap(Object.values).flat();

console.log(result)

Answer 3

Answer №2

If you're not interested in the months and just want to flatten it out, use flatMap and flat():

const arr =  [{JUNE: [{"iD": "67854", "event": " closed", "title": "test", "startDate": "2024-06-20", "endDate": "2024-07-25" } ] }, {MAY: [{"ID": "908765", "event": "closed", "title": "test", "startDate": "2024-05-21", "endDate": "2024-06-27" }, {ID: "12345", event: "open", title: "test123", startDate: "2024-05-21", endDate: "2024-06-27" } ] } ];

const res = arr.flatMap(c => Object.values(c).flat());

console.log(res)

If you want to include the month, then reduce the array and flatMap each Object.keys with a deeper map for all the events.

const arr =  [{JUNE: [{"iD": "67854", "event": " closed", "title": "test", "startDate": "2024-06-20", "endDate": "2024-07-25" } ] }, {MAY: [{"ID": "908765", "event": "closed", "title": "test", "startDate": "2024-05-21", "endDate": "2024-06-27" }, {ID: "12345", event: "open", title: "test123", startDate: "2024-05-21", endDate: "2024-06-27" } ] } ];

const res = arr.reduce((p, c) => ([ ...p, 
    ...(Object.keys(c)
        .flatMap(month => c[month]
          .map(o => ({ ...o, month })) )) 
        ])
, []);

console.log(res)

Or as a one-liner:

const res = arr.reduce((p, c) => ([ ...p,...(Object.keys(c).flatMap(month => c[month].map(o => ({ ...o, month })))])], []);

Answer 4

If you're not interested in the months and just want to flatten it out, use flatMap and flat():

const arr =  [{JUNE: [{"iD": "67854", "event": " closed", "title": "test", "startDate": "2024-06-20", "endDate": "2024-07-25" } ] }, {MAY: [{"ID": "908765", "event": "closed", "title": "test", "startDate": "2024-05-21", "endDate": "2024-06-27" }, {ID: "12345", event: "open", title: "test123", startDate: "2024-05-21", endDate: "2024-06-27" } ] } ];

const res = arr.flatMap(c => Object.values(c).flat());

console.log(res)

If you want to include the month, then reduce the array and flatMap each Object.keys with a deeper map for all the events.

const arr =  [{JUNE: [{"iD": "67854", "event": " closed", "title": "test", "startDate": "2024-06-20", "endDate": "2024-07-25" } ] }, {MAY: [{"ID": "908765", "event": "closed", "title": "test", "startDate": "2024-05-21", "endDate": "2024-06-27" }, {ID: "12345", event: "open", title: "test123", startDate: "2024-05-21", endDate: "2024-06-27" } ] } ];

const res = arr.reduce((p, c) => ([ ...p, 
    ...(Object.keys(c)
        .flatMap(month => c[month]
          .map(o => ({ ...o, month })) )) 
        ])
, []);

console.log(res)

Or as a one-liner:

const res = arr.reduce((p, c) => ([ ...p,...(Object.keys(c).flatMap(month => c[month].map(o => ({ ...o, month })))])], []);

Answer 5

Answer №3

To tackle this problem (particularly challenging if you are not well-versed in the topic), one approach is to leverage reduce and concat in the following way:

const arr = [{JUNE:[{iD:"67854",event:" closed",title:"test",startDate:"2024-06-20",endDate:"2024-07-25"}]},{MAY:[{ID:"908765",event:"closed",title:"test",startDate:"2024-05-21",endDate:"2024-06-27"},{ID:"12345",event:"open",title:"test123",startDate:"2024-05-21",endDate:"2024-06-27"}]}];

const result = arr.reduce((acc, eventsByMonth) => acc.concat(
  ...Object.entries(eventsByMonth).reduce((acc, [month, events]) => acc.concat(
    ...events.map(event => ({ month, ...event }))
  ), [])
), []);

console.log(result);

reduce enables iteration over an array and data aggregation into an accumulator. Here, the accumulator serves as the resulting array.

Answer 6

To tackle this problem (particularly challenging if you are not well-versed in the topic), one approach is to leverage reduce and concat in the following way:

const arr = [{JUNE:[{iD:"67854",event:" closed",title:"test",startDate:"2024-06-20",endDate:"2024-07-25"}]},{MAY:[{ID:"908765",event:"closed",title:"test",startDate:"2024-05-21",endDate:"2024-06-27"},{ID:"12345",event:"open",title:"test123",startDate:"2024-05-21",endDate:"2024-06-27"}]}];

const result = arr.reduce((acc, eventsByMonth) => acc.concat(
  ...Object.entries(eventsByMonth).reduce((acc, [month, events]) => acc.concat(
    ...events.map(event => ({ month, ...event }))
  ), [])
), []);

console.log(result);

reduce enables iteration over an array and data aggregation into an accumulator. Here, the accumulator serves as the resulting array.

Answer 7

Answer №4

You have the option to simplify your code by using a reduce method to flatten the array:

const arr = [
    {
        JUNE: [
            {
                "iD": "67854",
                "event": " closed",
                "title": "test",
                "startDate": "2024-06-20",
                "endDate": "2024-07-25"
            }
        ]
    },
    {
        MAY: [
            {
                "ID": "908765",
                "event": "closed",
                "title": "test",
                "startDate": "2024-05-21",
                "endDate": "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            }
        ]
    }
];

function flattenArray(array) {
    return array.reduce((acc, currentObj) => {
        Object.values(currentObj).forEach(nestedArray => {
            nestedArray.forEach(item => {
                // Check and correct inconsistencies in property names
// Do not perform this correction if unnecessary
                if (item.iD && !item.ID) {
                    item.ID = item.iD;
                    delete item.iD;
                }
                acc.push(item);
            });
        });
        return acc;
    }, []);
}

console.log(flattenArray(arr));

Answer 8

You have the option to simplify your code by using a reduce method to flatten the array:

const arr = [
    {
        JUNE: [
            {
                "iD": "67854",
                "event": " closed",
                "title": "test",
                "startDate": "2024-06-20",
                "endDate": "2024-07-25"
            }
        ]
    },
    {
        MAY: [
            {
                "ID": "908765",
                "event": "closed",
                "title": "test",
                "startDate": "2024-05-21",
                "endDate": "2024-06-27"
            },
            {
                ID: "12345",
                event: "open",
                title: "test123",
                startDate: "2024-05-21",
                endDate: "2024-06-27"
            }
        ]
    }
];

function flattenArray(array) {
    return array.reduce((acc, currentObj) => {
        Object.values(currentObj).forEach(nestedArray => {
            nestedArray.forEach(item => {
                // Check and correct inconsistencies in property names
// Do not perform this correction if unnecessary
                if (item.iD && !item.ID) {
                    item.ID = item.iD;
                    delete item.iD;
                }
                acc.push(item);
            });
        });
        return acc;
    }, []);
}

console.log(flattenArray(arr));

Answer 9

Answer №5

Begin by creating a fresh array to store the outcomes.
Iterate through each item within the original array.
Access the property of each object, which happens to be an array.
For every item in this array, go through them one by one.
Generate a new object using the event data, including the month property obtained from the object key.
Add this newly created object to the results array.

const arr = [ /* your initial array */ ];

const newArray = [];

arr.forEach(monthObject => {
  const month = Object.keys(monthObject)[0];
  monthObject[month].forEach(event => {
    const newEvent = { ...event,
      month: month.toUpperCase()
    };
    newArray.push(newEvent);
  });
});

console.log(newArray);

Based on the image you've provided, which demonstrates the desired format for transforming your data, it seems like you aim to convert an array of objects representing events.

const events = [ /* your original array */ ];

const getMonthName = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleString('default', {
    month: 'long'
  }).toUpperCase();
}

const updatedEvents = events.map(event => {
  return {
    ...event,
    month: getMonthName(event.startDate)
  };
});

console.log(updatedEvents);

Answer 10

Begin by creating a fresh array to store the outcomes.
Iterate through each item within the original array.
Access the property of each object, which happens to be an array.
For every item in this array, go through them one by one.
Generate a new object using the event data, including the month property obtained from the object key.
Add this newly created object to the results array.

const arr = [ /* your initial array */ ];

const newArray = [];

arr.forEach(monthObject => {
  const month = Object.keys(monthObject)[0];
  monthObject[month].forEach(event => {
    const newEvent = { ...event,
      month: month.toUpperCase()
    };
    newArray.push(newEvent);
  });
});

console.log(newArray);

Based on the image you've provided, which demonstrates the desired format for transforming your data, it seems like you aim to convert an array of objects representing events.

const events = [ /* your original array */ ];

const getMonthName = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleString('default', {
    month: 'long'
  }).toUpperCase();
}

const updatedEvents = events.map(event => {
  return {
    ...event,
    month: getMonthName(event.startDate)
  };
});

console.log(updatedEvents);

Changing an array of object arrays into a consolidated array in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Utilizing ng For in a personalized directive to fill a selection menu

Looking for assistance in adding some animated flair to your website as users scroll

Struggling with jQuery fadeIn and fadeOut in IE8?

Browsing JSON data to pinpoint locations on a Google map

Display or conceal toggle in ruby utilizing jQuery

Count up with style using the "jQuery Boilerplate" plugin for Jquery!

Freezing Columns and Rows for a Spacious Scrollable Table

What could be causing an undefined error when running Javascript with Python and Selenium?

Cease the inclusion of the definition file import in the output of TS

JS Issue with Countdown functionality in Internet Explorer and Safari

Tips for retrieving all JavaScript source links from a website URL during page download

Creating hashbang #! URL patterns for handling REST requests in client-side applications

Unable to display icon using the fontawesome react-js library

What is the process for adding an item to an object?

What could be causing the erratic jumping behavior of the "newsletter sign-up" form within my modal dialog window?

Decoding the enigma of addEventListener in Nuxt: Unveiling the "referenceError: window is not defined" issue

Toggle the visibility of the left sidebar by hovering the mouse over it

Preserving User Login Details during Page Refresh in AngularJS

What should be the output when ending the process using process.exit(1)?

Retrieving dynamically generated form components upon submission in a React application