Aggregate information from an array containing multiple nested arrays

Question

Aggregate information from an array containing multiple nested arrays

With regards to marking this as answered by another question, please take note that this is not a flat array but an array of arrays. Additionally, the numbers provided are just examples for visual representation.

I am attempting to iterate through an array of arrays with the following structure:-

[
   [1, 2, 3, 4, 5, 6, 7, 8, 9],
   [1, 2, 3, 4, 5, 6, 7, 8, 9],
   [1, 2, 3, 4, 5, 6, 7, 8, 9],
   [3, 2, 1, 6, 5, 4, 9, 8, 7],
   [6, 5, 4, 9, 8, 7, 3, 2, 1],
   [7, 8, 9, 3, 2, 1, 6, 5, 4]
]

How can I transform this array into chunks of 3x3 like so:-

[
   [1, 2, 3, 1, 2, 3, 1, 2, 3],
   [4, 5, 6, 4, 5, 6, 4, 5, 6],
   [7, 8, 9, 7, 8, 9, 7, 8, 9],
   [3, 2, 1, 6, 5, 4, 9, 8, 7],
   [6, 5, 4, 9, 8, 7, 3, 2, 1],
   [7, 8, 9, 3, 2, 1, 6, 5, 4],
]

I have chunked the array using the first 3 values from each sub-array, followed by the next 3 values, and then the final 3 values.

The resulting chunked array should appear as follows:-

1 2 3 | 4 5 6 | 7 8 9
1 2 3 | 4 5 6 | 7 8 9
1 2 3 | 4 5 6 | 7 8 9
---------------------
3 2 1 | 6 5 4 | 9 8 7
6 5 4 | 9 8 7 | 3 2 1
7 8 9 | 3 2 1 | 6 5 4

I have attempted iterating through each row, resetting the column count upon reaching an increment, and increasing the row number accordingly, but this approach was not successful.

I am willing to provide details of my previous attempts if it would be beneficial. Additionally, it's worth noting that the size of the array may vary but will always be divisible by a specific number, which in this instance is 3.

Further information has been added to the question. The array of arrays will consistently be divisible by a particular numerical value, with the current example demonstrating a divisibility by 3.

javascript arrays chunking

Answer 1

Answer №1

To tackle this issue, one can utilize a chunk method as discussed in Split array into chunks, along with a zip function similar to Python's as covered in

/** @see: https://stackoverflow.com/questions/8495687/split-array-into-chunks */
function divideArray(array, chunk) {
    let result = [];
    for (let i = 0; i < array.length; i += chunk) {
        result.push(array.slice(i, i + chunk));
    }
    return result;
}

/** @see: https://stackoverflow.com/questions/4856717/javascript-equivalent-of-pythons-zip-function */
function zip(...rows) {
    return [...rows[0]].map((_, c) => rows.map((row) => row[c]));
}

const array = [
    [1, 2, 3, 4, 5, 6, 7, 8, 9],
    [1, 2, 3, 4, 5, 6, 7, 8, 9],
    [1, 2, 3, 4, 5, 6, 7, 8, 9],
    [3, 2, 1, 6, 5, 4, 9, 8, 7],
    [6, 5, 4, 9, 8, 7, 3, 2, 1],
    [7, 8, 9, 3, 2, 1, 6, 5, 4],
];

const result = divideArray(array, 3)
    .flatMap((innerChunk) =>
        zip(...innerChunk.map((arr) => divideArray(arr, 3)))
        .map((arr) => arr.flat())
    );

console.log(result.map((a) => a.join(', ')));

// Reverses the operation to get back to the original
const reversed = divideArray(result, 3)
    .flatMap((innerChunk) =>
        zip(...innerChunk.map((arr) => divideArray(arr, 3)))
        .map((arr) => arr.flat())
    );

console.log(reversed.map((a) => a.join(', ')));

Answer 2

To tackle this issue, one can utilize a chunk method as discussed in Split array into chunks, along with a zip function similar to Python's as covered in

/** @see: https://stackoverflow.com/questions/8495687/split-array-into-chunks */
function divideArray(array, chunk) {
    let result = [];
    for (let i = 0; i < array.length; i += chunk) {
        result.push(array.slice(i, i + chunk));
    }
    return result;
}

/** @see: https://stackoverflow.com/questions/4856717/javascript-equivalent-of-pythons-zip-function */
function zip(...rows) {
    return [...rows[0]].map((_, c) => rows.map((row) => row[c]));
}

const array = [
    [1, 2, 3, 4, 5, 6, 7, 8, 9],
    [1, 2, 3, 4, 5, 6, 7, 8, 9],
    [1, 2, 3, 4, 5, 6, 7, 8, 9],
    [3, 2, 1, 6, 5, 4, 9, 8, 7],
    [6, 5, 4, 9, 8, 7, 3, 2, 1],
    [7, 8, 9, 3, 2, 1, 6, 5, 4],
];

const result = divideArray(array, 3)
    .flatMap((innerChunk) =>
        zip(...innerChunk.map((arr) => divideArray(arr, 3)))
        .map((arr) => arr.flat())
    );

console.log(result.map((a) => a.join(', ')));

// Reverses the operation to get back to the original
const reversed = divideArray(result, 3)
    .flatMap((innerChunk) =>
        zip(...innerChunk.map((arr) => divideArray(arr, 3)))
        .map((arr) => arr.flat())
    );

console.log(reversed.map((a) => a.join(', ')));

Answer 3

Answer №2

If you want to achieve this, you can utilize a nested loop and slice the array based on the size of the outer array each time.

const arr = [
   [1, 2, 3, 4, 5, 6, 7, 8, 9],
   [1, 2, 3, 4, 5, 6, 7, 8, 9],
   [1, 2, 3, 4, 5, 6, 7, 8, 9]
];

let out = [];
for(let i in arr) { out.push([]);}

arr.forEach((e, i) => {
    let scale = e.length / arr.length;
    for(let j in arr)
    {
      out[j] = out[j].concat(e.slice(j * scale, j * scale + scale));
    }
});

console.log(out);

Here is the code snippet with the original array before your changes:

const arr = [
   [1, 3, 2, 5, 2, 4, 3, 6, 8],
   [1, 4, 3, 6, 7, 3, 6, 4, 5],
   [2, 4, 1, 4, 6, 3, 7, 9, 7]
];

let out = [];
for(let i in arr) { out.push([]);}

arr.forEach((e, i) => {
    let scale = e.length / arr.length;
    for(let j in arr)
    {
      out[j] = out[j].concat(e.slice(j * scale, j * scale + scale));
    }
});

console.log(out);

Answer 4

If you want to achieve this, you can utilize a nested loop and slice the array based on the size of the outer array each time.

const arr = [
   [1, 2, 3, 4, 5, 6, 7, 8, 9],
   [1, 2, 3, 4, 5, 6, 7, 8, 9],
   [1, 2, 3, 4, 5, 6, 7, 8, 9]
];

let out = [];
for(let i in arr) { out.push([]);}

arr.forEach((e, i) => {
    let scale = e.length / arr.length;
    for(let j in arr)
    {
      out[j] = out[j].concat(e.slice(j * scale, j * scale + scale));
    }
});

console.log(out);

Here is the code snippet with the original array before your changes:

const arr = [
   [1, 3, 2, 5, 2, 4, 3, 6, 8],
   [1, 4, 3, 6, 7, 3, 6, 4, 5],
   [2, 4, 1, 4, 6, 3, 7, 9, 7]
];

let out = [];
for(let i in arr) { out.push([]);}

arr.forEach((e, i) => {
    let scale = e.length / arr.length;
    for(let j in arr)
    {
      out[j] = out[j].concat(e.slice(j * scale, j * scale + scale));
    }
});

console.log(out);

Aggregate information from an array containing multiple nested arrays

Answer №1

Answer №2

Similar questions

Choose an element from within a variable that holds HTML code

Tips for using Jquery to round up currency values

Error: OpenAI's transcription API has encountered a bad request issue

How can you optimize the storage of keys in JS objects?

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

"Experiencing a problem with Next.js 13 where the User Context is not functioning properly outside of _app

Is it necessary for Webpack to process the index.html file for Vue applications?

Creating multiple objects in a threejs instance with varying sizes and positions

Need help with writing code in Angular for setting intervals and clearing intervals?

What is preventing me from accessing my session array in this.state.props from my mapStateToProps in React-Native Redux?

Utilizing Kendo MVVM to Bind to an Self-Executing Anonymous Module Function

Modifying the default error message in Yup: A step-by-step guide

The addition of days is producing an incorrect result

Update the navigation bar from displaying "LOGIN" to "LOGOUT

To restore the position of the chosen object in Three.js after clicking reset

What is the most efficient way to iterate through an array to push properties into an object nested within another array?

Automatically increase the height of a text area as you type beyond the maximum width limit

The functionality of the Vue.js single file component is not performing as anticipated

Implementing inline styles in the HEAD section of a Next.js website

Want to achieve success with your AJAX calls in JavaScript? Consider using $.get