Javascript - Split a array of objects into multiple arrays after each 4th element

Question

I have an array like this

const events = [
    {id: "1", title: "Javascript Workshop", description: "", location_id: "1"},
    {id: "2", title: "Vue Workshop", description: "", location_id: "2"},
    {id: "3", title: "PHP Workshop", description: "", location_id: "3"},
    {id: "4", title: "Python Workshop", description: "", location_id: "4"},
    {id: "5", title: "C++ Workshop", description: "", location_id: "5"},
    {id: "6", title: "C++ Workshop", description: "", location_id: "5"},
    {id: "7", title: "C# Workshop", description: "", location_id: "1"},
    {id: "8", title: "C# Workshop", description: "", location_id: "1"},
    {id: "9", title: "C# Workshop", description: "", location_id: "1"},
    {id: "10", title: "C# Workshop", description: "", location_id: "1"},
    {id: "11", title: "C# Workshop", description: "", location_id: "1"},
    {id: "12", title: "C# Workshop", description: "", location_id: "1"},
]

And I want to split every 4th element into a seperate array. The structure should then look like this:

const multiEvents = [
    [
        {id: "1", title: "Javascript Workshop", description: "", location_id: "1"},
        {id: "2", title: "Vue Workshop", description: "", location_id: "2"},
        {id: "3", title: "PHP Workshop", description: "", location_id: "3"},
        {id: "4", title: "Python Workshop", description: "", location_id: "4"}
    ],
    [
        {id: "5", title: "C++ Workshop", description: "", location_id: "5"},
        {id: "6", title: "C++ Workshop", description: "", location_id: "5"},
        {id: "7", title: "C# Workshop", description: "", location_id: "1"},
        {id: "8", title: "C# Workshop", description: "", location_id: "1"}
    ],
    [
        {id: "9", title: "C# Workshop", description: "", location_id: "1"},
        {id: "10", title: "C# Workshop", description: "", location_id: "1"},
        {id: "11", title: "C# Workshop", description: "", location_id: "1"},
        {id: "12", title: "C# Workshop", description: "", location_id: "1"}
    ],
]

How do I do that?

score 0 · Answer 1 · answered Jul 23 '20 at 11:55

Using reduce:

const chunk = (arr, chunkSize) => arr.reduce((result, item, itemIndex) => {
  const chunkIndex = Math.floor(itemIndex / chunkSize)

  if (result[chunkIndex] === undefined) {
    result[chunkIndex] = []
  }

  result[chunkIndex].push(item)

  return result
}, [])


const events = [
{id: "1"},
    {id: "2"},
    {id: "3"},
    {id: "4"},
    {id: "5"},
    {id: "6"},
    {id: "7"},
    {id: "8"},
    {id: "9"},
    {id: "10"},
    {id: "11"},
    {id: "12"},
]

console.log(chunk(events, 4))

Javascript - Split a array of objects into multiple arrays after each 4th element

1 Answers1