Splitting array into groups of 3 in javascript

Question

I am trying to split an array of objects into sets of 3 and there is a slight problem. I run the code and it splits the first group into 2 and the rest into 3. I want the last group to have the remaining elements. So for instance if there are 21 objects then the last group should have 2 but instead the first group is the one with 2. How can I make the last group be the one with the remaining objects?

var newData = [];
var setOfThree = [];

for (i = 0; i < data.length; i++) {
  setOfThree.push(data[i]);

  if (i % 3 == 1) {
    newData.push(setOfThree);
    setOfThree = [];
  }
}

So the data ends up looking like this:

Gershom Maes · Answer 1 · 2023-03-26T20:34:13.953

10

Here's a very clean and efficient solution (leverages the fact that Array.prototype.slice automatically truncates results):

let groupByN = (n, arr) => {
  let result = [];
  for (let i = 0; i < arr.length; i += n) result.push(arr.slice(i, i + n));
  return result;
};

console.log(JSON.stringify(groupByN(3, [])));
console.log(JSON.stringify(groupByN(3, [ 1 ])));
console.log(JSON.stringify(groupByN(3, [ 1, 2 ])));
console.log(JSON.stringify(groupByN(3, [ 1, 2, 3 ])));
console.log(JSON.stringify(groupByN(3, [ 1, 2, 3, 4 ])));
console.log(JSON.stringify(groupByN(3, [ 1, 2, 3, 4, 5 ])));
console.log(JSON.stringify(groupByN(3, [ 1, 2, 3, 4, 5, 6 ])));
console.log(JSON.stringify(groupByN(3, [ 1, 2, 3, 4, 5, 6, 7 ])));
console.log(JSON.stringify(groupByN(3, [ 1, 2, 3, 4, 5, 6, 7, 8 ])));

edited Mar 26 '23 at 20:34

answered Jun 07 '18 at 19:09

Gershom Maes

7,358
2
35
55

1

Beautiful. For those who might be having trouble with the syntax, you might have to add 'let': `for (let i = 0; i < data.length; i += n)`... – HigoChumbo Nov 12 '21 at 10:55
1

Good catch @HigoChumbo! I've edited – Gershom Maes Nov 12 '21 at 15:56

Ashish Ranjan · Answer 2 · 2018-06-07T19:02:07.357

The first array gets 2 items because, when i === 1 1%3 will result to 1

Starting from counter 1 could be one solution

    data = [1,2,3,4,5,6,7]
    var newData = [];
    // var setOfThree = []; // not required

    var j = 0
    newData.push([]);
    //pushing at the very begining, this way we won't miss if the data 
    // is not in groups of 3
    for (i = 1; i <= data.length; i++) {
      
      // always updating the final array
      newData[j].push(data[i-1]);

      if (i % 3 == 0) {
        newData.push([]);
        j++;
      }
    }
    if (newData[0].length === 0) {
       // if the data you received was epmty
       newData.pop()
    }
    console.log(newData)

instead of ```if (i % 3 == 0)``` use ```if (i % 3 == 0 && data[i])``` to prevent empty array at the end of newData array — Shubham Pokhriyal, May 25 '22 at 07:18

score 2 · Answer 3 · answered Jun 07 '18 at 18:52

Here a recursive implementation, with some es6 sugar

var input = [1,2,3,4,5,6,7,8]

function groupByThree([a,b,c,...rest]){
  if (rest.length === 0) return [[a,b,c].filter(x => x!==undefined)]
  return [[a,b,c]].concat(groupByThree(rest))
}

console.log(groupByThree(input))

Splitting array into groups of 3 in javascript

3 Answers3