how to group objects in an array into set of 3 object of multiple arrays in javascript?

Question

I have a following array as below which I further want to split into smaller arrays with each of the smaller array having three objects having the first and the next two objects in the array. The result should also be an array consisting of all the arrays of group of 3 objects.

var myArray = [
    {id: "one", color: "red"},
    {id: "two", color: "blue"},
    {id: "three", color: "green"},
    {id: "four", color: "black"},
    {id: "five", color: "red"},
    {id: "six", color: "blue"},
    {id: "seven", color: "green"},
    {id: "eight", color: "black"}
];

and I expect this result

var myArray = [
       [ {id: "one", color: "red"},{id: "two", color: "blue"},{id: "three", color: "green"}],
       [ {id: "two", color: "blue"},{id: "three", color: "green"},{id: "four", color: "black"}],
       [{id: "three", color: "green"},{id: "four", color: "black"},{id: "five", color: "red"}],
       [{id: "four", color: "black"},{id: "five", color: "red"}, {id: "six", color: "blue"}],
       [{id: "five", color: "red"}, {id: "six", color: "blue"},{id: "seven", color: "green"}],
       [{id: "six", color: "blue"},{id: "seven", color: "green"},{id: "eight", color: "black"}],
    ];

Answer 1

You can use reduce function and use its index to push three elements in new array

 var myArray = [{ id: "one", color: "red" }, { id: "two", color: "blue" }, { id: "three", color: "green" }, { id: "four", color: "black" }, { id: "five", color: "red" }, { id: "six", color: "blue" }, { id: "seven", color: "green" }, { id: "eight", color: "black" } ]; let newArray = myArray.reduce(function(acc, curr, index) { // checking if the index+2 of the array is not out of bound // element at index,index+1,index+2 , total three elements will be pushed if (myArray[index + 2] !== undefined) { let localArray = []; localArray.push(myArray[index]); localArray.push(myArray[index + 1]) localArray.push(myArray[index + 2]) acc.push(localArray) } return acc; }, []) console.log(newArray) 

Answer 2

@user3037093 , you can try the below code.

var myArray = [
    {id: "one", color: "red"},
    {id: "two", color: "blue"},
    {id: "three", color: "green"},
    {id: "four", color: "black"},
    {id: "five", color: "red"},
    {id: "six", color: "blue"},
    {id: "seven", color: "green"},
    {id: "eight", color: "black"}
];

var myResultArr = []
for(var i=0; i < myArray.length-2; i++) {
    myResultArr.push([myArray[i], myArray[i+1], myArray[i+2]])
}

// Pretty printing myResultArr
console.log(JSON.stringify(myResultArr, undefined, 4))

» Output

[
    [
        {
            "id": "one",
            "color": "red"
        },
        {
            "id": "two",
            "color": "blue"
        },
        {
            "id": "three",
            "color": "green"
        }
    ],
    [
        {
            "id": "two",
            "color": "blue"
        },
        {
            "id": "three",
            "color": "green"
        },
        {
            "id": "four",
            "color": "black"
        }
    ],
    [
        {
            "id": "three",
            "color": "green"
        },
        {
            "id": "four",
            "color": "black"
        },
        {
            "id": "five",
            "color": "red"
        }
    ],
    [
        {
            "id": "four",
            "color": "black"
        },
        {
            "id": "five",
            "color": "red"
        },
        {
            "id": "six",
            "color": "blue"
        }
    ],
    [
        {
            "id": "five",
            "color": "red"
        },
        {
            "id": "six",
            "color": "blue"
        },
        {
            "id": "seven",
            "color": "green"
        }
    ],
    [
        {
            "id": "six",
            "color": "blue"
        },
        {
            "id": "seven",
            "color": "green"
        },
        {
            "id": "eight",
            "color": "black"
        }
    ]
]

Answer 3

You may solve this problem using Array#reduce and Array#slice :

 var myArray = [ {id: "one", color: "red"}, {id: "two", color: "blue"}, {id: "three", color: "green"}, {id: "four", color: "black"}, {id: "five", color: "red"}, {id: "six", color: "blue"}, {id: "seven", color: "green"}, {id: "eight", color: "black"} ] const output = myArray.slice(0, myArray.length - 2) .reduce((r, _, i) => [...r, myArray.slice(i, i + 3)] , []) console.log(JSON.stringify(output)) 

Alternate approach using ranges

I believe that this is a good approach to solve your issue because it doesn't involve manipulating the source array but it's just about preparing an array of arrays, where each inner array contains the indices to 3 elements in myArray :

 var myArray = [ {id: "one", color: "red"}, {id: "two", color: "blue"}, {id: "three", color: "green"}, {id: "four", color: "black"}, {id: "five", color: "red"}, {id: "six", color: "blue"}, {id: "seven", color: "green"}, {id: "eight", color: "black"} ] // Creates a numeric array containing numbers // starting from 'start' to 'end'. It's zero-indexed! const range = ( start, end ) => { const result = [] for(let i = start; i < end; i++) result.push(i) return result } const output = range ( 0, myArray.length - 2 ) .map( i => range ( i, i + 3 ).map ( j => myArray[j] ) ) console.log ( JSON.stringify ( output ) ) 

Answer 4

You can use Array.prototype.map to iterate over each element that you want to change
and use Array.prototype.slice to replace current element with require element
and use Array.prototype.splice to remove extra elemnt from array;

 var myArray = [ {"id": "one", "color": "red"}, {"id": "two", "color": "blue"}, {"id": "three", "color": "green"}, {"id": "four", "color": "black"}, {"id": "five", "color": "red"}, {"id": "six", "color": "blue"}, {"id": "seven", "color": "green"}, {"id": "eight", "color": "black"} ]; var x1 = myArray.map(function(x,i) { y = myArray.slice(index, index + 3); return y; }); x1.splice(myArray.length-2,2); console.log(x1); 

Answer 5

You can use a simple for loop to make a new array of each object and then push that temporary array into your new array:

let newArr = [];

for(let i = 0; i < myArray.length; i++) {
 let tempArr = [myArray[i]];
 newArr.push(tempArr);
}

console.log(newArr);
// Output: 
[ 
 [ { id: 'one', color: 'red' } ],
 [ { id: 'two', color: 'blue' } ],
 [ { id: 'three', color: 'green' } ],
 [ { id: 'four', color: 'black' } ],
 [ { id: 'five', color: 'red' } ],
 [ { id: 'six', color: 'blue' } ],
 [ { id: 'seven', color: 'green' } ],
 [ { id: 'eight', color: 'black' } ] 
];

*I noticed you're missing a comma after the fourth object in your original array.