Traversing the nested arrays, processing column by column

Question

Traversing the nested arrays, processing column by column

Below is an array of subarrays

const array = [
[0, 1, 2, 3],             // Going from top to bottom?
[4, 5, 6, 7, 8, 9],       // |
[10, 11, 12, 13, 14],     // |
[15, 16, 17, 18, 19],     // |
]                         // V

My goal is to achieve the following output

newArray = [0, 4, 10, 15, 1, 5, 11, 16, 2, 6, 12 ...]

This is my current approach:

      let idx = 0;
      let newArray = []
      for (let i = 0; i < array.length; i++) {
        for (let j = 0; j < array[i].length; j++) {
          newArray.push(array[idx][j])
          idx++;
        }
        idx = 0;
      }

javascript arrays sorting sub-array

Answer 1

Answer №1

Here is a potential solution:

const array = [
  [0, 1, 2, 3],             // Traverse from top to bottom?
  [4, 5, 6, 7, 8, 9],       // |
  [10, 11, 12, 13, 14],     // |
  [15, 16, 17, 18, 19],     // |
]
// check if there is "more" to read
let hasMore = true;
// result array
const res = [];
// index for each "column"
let el = 0;
while(hasMore){
  // assume no more elements to read initially
  hasMore = false;
  // iterate through all elements in the input array
  for(let i = 0; i < array.length; i++){ 
    // check if the el-th element exists
    if(array[i][el] != undefined){
      // set flag that there might be more to read (i.e., next column)
      hasMore = true;
      // add the element to result
      res.push(array[i][el])
    }
  }
  // move to the next column
  el++;
}
console.log(res);

Alternatively, a functional style solution could be:

const array = [
  [0, 1, 2, 3],             // Traverse from top to bottom?
  [4, 5, 6, 7, 8, 9],       // |
  [10, 11, 12, 13, 14],     // |
  [15, 16, 17, 18, 19],     // |
]
const res = array.flatMap(
  el => el.map(
    (o, i) => ({
      index: i,
      el: o
    })
  ))
  .sort((a, b) => a.index - b.index)
  .map(({el}) => el)

console.log(res)

Answer 2

Here is a potential solution:

const array = [
  [0, 1, 2, 3],             // Traverse from top to bottom?
  [4, 5, 6, 7, 8, 9],       // |
  [10, 11, 12, 13, 14],     // |
  [15, 16, 17, 18, 19],     // |
]
// check if there is "more" to read
let hasMore = true;
// result array
const res = [];
// index for each "column"
let el = 0;
while(hasMore){
  // assume no more elements to read initially
  hasMore = false;
  // iterate through all elements in the input array
  for(let i = 0; i < array.length; i++){ 
    // check if the el-th element exists
    if(array[i][el] != undefined){
      // set flag that there might be more to read (i.e., next column)
      hasMore = true;
      // add the element to result
      res.push(array[i][el])
    }
  }
  // move to the next column
  el++;
}
console.log(res);

Alternatively, a functional style solution could be:

const array = [
  [0, 1, 2, 3],             // Traverse from top to bottom?
  [4, 5, 6, 7, 8, 9],       // |
  [10, 11, 12, 13, 14],     // |
  [15, 16, 17, 18, 19],     // |
]
const res = array.flatMap(
  el => el.map(
    (o, i) => ({
      index: i,
      el: o
    })
  ))
  .sort((a, b) => a.index - b.index)
  .map(({el}) => el)

console.log(res)

Answer 3

Answer №2

Uncertain if this method will solve the problem since it involves creating a new array, but it could be beneficial.

let freshArray = Array.prototype.concat.apply([], originalArray);

Answer 4

Uncertain if this method will solve the problem since it involves creating a new array, but it could be beneficial.

let freshArray = Array.prototype.concat.apply([], originalArray);

Answer 5

Answer №3

Here's a different example demonstrating the use of various methods:

Object.values() Link to Object.values documentation
Array.reduce() Link to Array.reduce documentation
Array.map() Link to Array.map documentation
Array.flat() Link to Array.flat documentation

const array = [
  [0, 1, 2, 3],
  [4, 5, 6, 7, 8, 9],
  [10, 11, 12, 13, 14],
  [15, 16, 17, 18, 19],
]

var final = Object.values(
  array.reduce((acc, cur) => (
    cur.map((elm, idx) => idx in acc ? acc[idx].push(elm) : acc[idx] = [elm]), acc
  ), {})
).flat();

const pre = document.createElement('pre');
pre.innerText = JSON.stringify(final);
document.querySelector('body').appendChild(pre);

Answer 6

Here's a different example demonstrating the use of various methods:

Object.values() Link to Object.values documentation
Array.reduce() Link to Array.reduce documentation
Array.map() Link to Array.map documentation
Array.flat() Link to Array.flat documentation

const array = [
  [0, 1, 2, 3],
  [4, 5, 6, 7, 8, 9],
  [10, 11, 12, 13, 14],
  [15, 16, 17, 18, 19],
]

var final = Object.values(
  array.reduce((acc, cur) => (
    cur.map((elm, idx) => idx in acc ? acc[idx].push(elm) : acc[idx] = [elm]), acc
  ), {})
).flat();

const pre = document.createElement('pre');
pre.innerText = JSON.stringify(final);
document.querySelector('body').appendChild(pre);

Traversing the nested arrays, processing column by column

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to calculate the total number of results using ajax?

Using a carousel component in Bootstrap

Elevating the Components of an Array Similar to a Numeric Value

using absolute URLs for image source in JavaScript

The Power of AngularJS - Unlocking the Potential of Module Configuration

The mystery of the unassigned value in $(this).data(value) when using the jQuery click() method

What could be causing my data to shift after refreshing in Firefox with the F5 key?

The jQuery .click() function is not triggering when clicked

Stop the reloading of the parent page when the exit button is pressed on the popup screen

Dynamic class/interface in Typescript (using Angular)

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

Error in AJAX transmission

It's next to impossible to secure expedited work on an ongoing project using Vercel

Utilizing cookies to track the read status of articles - markers for reference

Dynamic AJAX Dependent Dropdown Menu

A guide to removing functions from the render method

Having trouble sending an ajax request from localhost to a remote server

Try enabling automatic status bar filling in Onsen UI when working with AngularJS

Ways to customize the border color on a Card component using React Material UI

Resolving the bothersome complications of self-looping steps in jQuery animate delay