How to split a long array into smaller arrays, with JavaScript

Question

I have an array of e-mails (it can be just 1 email, or 100 emails), and I need to send the array with an ajax request (that I know how to do), but I can only send an array that has 10 or less e-mails in it. So if there is an original array of 20 e-mails I will need to split them up into 2 arrays of 10 each. or if there are 15 e-mails in the original array, then 1 array of 10, and another array of 5. I'm using jQuery, what would be the best way to do this?

Solution 1

Don't use jquery...use plain javascript

var a = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

var b = a.splice(0,10);

//a is now [11,12,13,14,15];
//b is now [1,2,3,4,5,6,7,8,9,10];

You could loop this to get the behavior you want.

var a = YOUR_ARRAY;
while(a.length) {
    console.log(a.splice(0,10));
}

This would give you 10 elements at a time...if you have say 15 elements, you would get 1-10, the 11-15 as you wanted.

Solution 2

var size = 10; var arrayOfArrays = [];
for (var i=0; i<bigarray.length; i+=size) {
     arrayOfArrays.push(bigarray.slice(i,i+size));
}
console.log(arrayOfArrays);

Unlike splice(), slice() is non-destructive to the original array.

Solution 3

Just loop over the array, splicing it until it's all consumed.

var a = ['a','b','c','d','e','f','g']
  , chunk

while (a.length > 0) {

  chunk = a.splice(0,3)

  console.log(chunk)

}

output

[ 'a', 'b', 'c' ]
[ 'd', 'e', 'f' ]
[ 'g' ]

Solution 4

You can use lodash: https://lodash.com/docs

_.chunk(['a', 'b', 'c', 'd'], 2);
// → [['a', 'b'], ['c', 'd']]

Solution 5

Array.reduce could be inefficient for large arrays, especially with the mod operator. I think a cleaner (and possibly easier to read) functional solution would be this:

const chunkArray = (arr, size) =>
  arr.length > size
    ? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
    : [arr];

View more solutions

Comments

[Claudio]

Note that YOUR_ARRAY will be consumed as well (array are objects...)

[jyore]

Yeah, i was just putting that because a is non-descriptive, and I already wrote the example using a...it is a completely unnecessary line of code...Although, that makes me think...if using this pattern, you may want to do a deep copy into a working array as to not disrupt you original

[zgthompson]

dont forget to make: newArr=[] a local variable

[Graham]

Code-only Answers tend to get flagged and then deleted for being Low Quality. Could you provide some commentary around how this solves the original problem?

[r3wt]

this doesn't work if the chunk size is less than the input array size.

[Simon.S.A.]

Welcome to stackoverflow. Your answer would be improved by adding some explanation.

[Drew Reese]

@junvar IDK if that 1-liner worked in 2018 (I seriously doubt it did), but it fails miserably today. You should never mutate (i.e. remove elements) an array being iterated over, it throws off the index, i.e. after each removal it should be re-adjusted by the number of elements removed, so it "skips ahead" and doesn't consume the array entirely. Try it

[Chukwu3meka]

this solution is better

[ego]

Could you please add some description?

[Nandha Frost]

Can you explain\give source to me how this works?

[S.B]

Welcome to stackoverflow. Your answer would be improved by adding some explanation.

[General Grievance]

ReferenceError: a is not defined

[Unmitigated]

@Enrico No, this is right.