loop through 2D array horizontally - javascript

You can use nested for Loops:

let grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
for(let i = 0; i < grid[0].length; i++){
  for(let j = 0; j < grid.length; j++)
    console.log(grid[j][i]);
}

You have a lot of answers that work if the arrays are all the same length. Here's a way to handle potentially different length arrays. It basically runs until it can't find any more data:

let grid = [
    [1, 2, 3, 4, 5],
    [4, 5, 6, 7],
    [7, 8, 9, 10, 11, 12]
  ];

let current = grid, i = 0
while(current.length){
    current = grid.filter(arr => i < arr.length)
    current.forEach(arr =>  console.log(arr[i]))
    i++
}

for(var i = 0; i < grid.length; i++) {
    var arr = grid[i];
    for(var j = 0; j < arr.length; j++) {
        console.log("array[" + i + "][" + j + "] = " + arr[j]);
    }
}

you just have to find the sizes of the inner array and outer array

for(let i=0;i<countYourArraySize;i++)
{
for(let j=0;j<countYourInnerArayLength;j++)
{
console.log(grid[j][i])
}
}

let grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let gridLength = grid[0].length;
let gridHeight = grid.length;
for(let l1=0; l1<gridLength;l1++) {
    for(let l2=0; l2<gridHeight;l2++) {
        console.log(grid[l2][l1]);
    }
}

Assuming grid is rectangular(and grids usually are ;)), you can loop through it, columns first, rows second like in this snippet.

There was a question if we can do it without 2 loops, we can and I think its actually better and cleaner solution:

let grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let gridLength = 3;
for(let l1=0; l1<gridLength*gridLength;l1++) {
    console.log(grid[l1%gridLength][Math.floor(l1/gridLength)]);
}

You can do it with just one (explicit) loop if you use map:

let grid = [
 [1,2,3],
 [4,5,6],
 [7,8,9]
];
let result = [];
for (let i=0; i < grid.length; i++) {
    result = result.concat(grid.map((row) => row[i])));
}
console.log(result);

You can do this in a single loop. But the length must same for this

let grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (var i = 0; i < grid.length*grid.length; i++) {
    var row = Math.floor(i / grid.length);
    var col = i % grid.length;
    console.log(grid[col][row]);
}

You need to make use of a nested for loop:

So please have a look at my solution:

let grid = [
     [1,2,3],
     [4,5,6],
     [7,8,9]
];
for (let x = 0; x < grid[0].length; x++) {
    for (let y = 0; y < grid.length; y++) { 
      console.log(grid[y][x]);
    }
}

This grid prints out the expected solution: 1, 4, 7, 2, 5, 8, 3, 6, 9?

Some explanation:

In this case we are using two different for-loops.

• the outer one for the X for (let x = 0; x < 3; x++) {}
• the inner one for the Y for (let y = 0; y < 3; x++) {}

Note: This will just work if the grid is rectangular because using grid[0].length will otherwise produce an error.

Edit: If you just want to use a single loop try something like this:

let grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let i = 0 ; i < grid.length * grid[0].length ; i++)
     console.log(grid[i % grid.length][parseInt(i / grid.length)]);