Javascript map over two dimensional array

Question

I have this array:

rows = [ [ 89, 18, 9 ], [ 1903, 3, 4 ], [ 3, 1, 800 ] ];

It should look like this:

[ [ 89, 1903, 3 ], [ 18, 3, 1 ], [ 9, 4, 800 ] ]

And the code, that is working, looks like this:

rows[0].map((_, columnIndex) => rows.map(
            row => row[columnIndex])
        );

How does this work?

The description for the 2d tag is `2D computer graphics is the computer-based generation of digital images—mostly from two-dimensional models.` - totally not what you're talking about — vityavv, Mar 05 '18 at 22:56
You're _transposing_ your data structure, which only works with that code because it's *square*. Either way, perhaps you could explain which parts confuse you? Did you check up on what `map` does yet? — Jeroen, Mar 05 '18 at 23:05
I understand what map does, but i don't understand how the second chained map gets to the right array elements. Can you explain me that? — Armin Zierlinger, Mar 05 '18 at 23:12
@Jeroen Doesn't have to be square. It could be any rectangular array. It's just that the names of the variables are misleading. I'd rather write `rows[0].map((_, columnIndex) => rows.map(row => row[columnIndex]))`. — Aadit M Shah, Mar 05 '18 at 23:46

score 2 · Accepted Answer · answered Mar 05 '18 at 23:30

                  +--- The outter function map gets the first array to loop through the rows
[ 89,   18, 9   ] |
[ 1903, 3,  4   ] |
[ 3,    1,  800 ] v
  +--->
  |
  +- The nested function map is looping through the columns.
     The key here is the fixed column using index (column[index])
     from the outter function map, so every iteration from the outter
     function map will fix the access to that column, i.e -
     index = 0 will access the array as follow: array[j][0], array[j+1, 0], ... array[n, 0]
                                                         ^              ^                ^

This is an approach to illustrate what's happening using direct index accesses.

var rows = [ [ 89, 18, 9 ], [ 1903, 3, 4 ], [ 3, 1, 800 ] ];

var result = [];
for (var i = 0; i < rows[0].length; i++) {
  result[i] = new Array(rows[0].length).fill();

  for (var j = 0; j < rows.length; j++) {
    result[i][j] = rows[j][i]; // Here is the fixed column access using the outter index i.
  }
}

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Was just writing my own near identical answer. +1. My for loop was slightly different to yours though: `for(var i = 0; i < rows[0].length; i++){ result.push([]); for(var j = 0; j < rows.length; j++){ result[result.length-1].push(rows[j][i]); } }` — Zze, Mar 05 '18 at 23:35

score 1 · Answer 2 · answered Mar 05 '18 at 23:10

I'll assume you are simply not accustomed to the particular language features being used here, hence why you can't follow what is going on, so here goes:

Your structure is a nested Array. Hence the nested Array.maps.
Both map callbacks make use of implicit return.

which unfolds to this:

rows[0].map((row, index) => {
  return rows.map((column) => {
    return column[index]
  })
})

The 2 arguments passed to the map callback are the following:

element: The currently iterated Array element; In your first map this is the row argument.
i: The current iteration number, starting from 0; In your first map this is the index argument.

That's all there is to it. From then on you just follow the iterations and the values of each argument at each iteration.

score 0 · Answer 3 · edited Oct 01 '20 at 14:49

Iterator Methods (like map,forEach,filter...) dealing with array 2d as every element is 1d array

For example:

    arr= [[1,0,0],
          [0,1,0],
          [0,0,1]]
    arr.map( (item)=> {
           item.forEach( (element)=> {
             //...
            //...
           })
    })

The first iterator (map) take the first row in arr array in this example [1,0,0]

The second iterator takes the second row of arr that is [0,1,0] save it in item and so on...

In a nested loop (foreach) that take the real number like 0 or 1. Here the code can deal with it.

Javascript map over two dimensional array

3 Answers3