Creating array of arrays of objects from array of objects

Question

Currently my data is an array with a long list of objects in the format:

[ 
    { name: 'example' },
    { name: 'example' },
    ...
]

What I am trying to do is to convert this list into arrays of arrays of objects at a given interval, 20.

I want this format:

[
  [
   { name: 'example' },
   { name: 'example' },
    ...18 more rows
   ],
  [
   { name: 'example' },
   { name: 'example' },
    ...18 more rows
  ],
]

chartdata contains the data in initial format, I am trying to get the new format in 'newArray'. In order to achieve this I have put:

  let newArray = [];
  let data = [];

  chartdata.forEach((x, i) => {
    if(i === chartdata.length - 1 ){
      newArray.push(data)
      data = []
    }
    if(i%20===0){
      newArray.push(data)
      data = []
    }
    data.push(x);
  })
  console.log('newArray',newArray)

There are two things I do not understand.

The console log shows the below:

Why is there an empty array in the first index of newArray?

Thank you, I have added && i !== 0 in the second if statement.

Why does index 4 of newArray only have 19 values?

The first question is fairly easy to resolve, however the second question I do not understand how to fix. Please can anyone provide some help?

The first array is empty bcoz 0%20 = 0 so the 2nd condition gets true and the empty array is pushed into the final array — AHMED SAJJAD
– AHMED SAJJAD, Commented Feb 23, 2021 at 14:26
forEach((x,i) => {}) Here, in this line x is current element and I is its index. Indexes start from 0 in Javascript. Hence for the first element x, index i=0 & i%20 === 0 is true (as 0%20 is equal to 0) & hence empty data array which is initialized in 2nd line of code is being pushed into newarray and that is why index 0 of newarray is empty array. — Sai
– Sai, Commented Feb 23, 2021 at 14:27

Lauro Müller · Accepted Answer · 2021-02-23 14:36:16Z

1

If you are open to integrating other packages into the project, I believe the function chunk from Lodash serves exactly this purpose: https://lodash.com/docs/4.17.15#chunk

The code becomes as simple as (and much clear in terms of what is happening):

const chunks = _.chunk(chartdata, 20);

In general, since it seems you will be working a lot with arrays, consider integrating Lodash into your project, the library targets exactly the many operations one would want to perform with arrays. I have been working several years with the library in my projects, and hardly ever (if ever) came across an operation that was not covered by their functions.

There are some suggestions regarding optimization, but to be honest I never found importing the whole library to be a problem when it comes to bundle size.

answered Feb 23, 2021 at 14:36

Lauro Müller

1746 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dellink · Accepted Answer · 2021-02-23 14:33:57Z

0

let i,j, newArray = [],chunk = 20;
for (i=0,j=chartdata.length; i<j; i+=chunk) {
    newArray.push(chartdata.slice(i,i+chunk));
}

answered Feb 23, 2021 at 14:33

dellink

5493 silver badges16 bronze badges

1 Comment

con Over a year ago

an explanation is often helpful

Collectives™ on Stack Overflow

Creating array of arrays of objects from array of objects

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related