How to work re-organize array so that its sorted in columns rather than rows

Question

I have some checkboxes on a page that are organized in 3 columns. However they are alphabetically sorted and go across the rows instead.

What is currently happening:

A B C 
D E F
G H I

What I want to happen:

A D G
B E H
C F I

Right now I've got this code to work it out but I feel super confused by what to do when theres a remainder in the array and I don't know how to include it into the sorting without messing it up:

organizedCheckboxesArea() {

            let quotient = Math.floor(this.areas.length/3);
            let remainder = this.areas.length % 3;

            let organizedColumns = [];

            for(let i = 0 ; i < quotient; i++) {

                    organizedColumns.push(this.areas[i]);
                    organizedColumns.push(this.areas[quotient + i]);
                    organizedColumns.push(this.areas[(quotient * 2) + i]);
            }


            return organizedColumns;
        },

Its frustrating me a lot because I know the solution is simple I just can't think of it.

EDIT: this is not a 2 dimensional array. it is ['A', 'B', 'C', 'D' etc...].

Also for when there is a remainder, I want it to stack to the left two columms. ie ABCDEFGHIJ would make:

A E H
B F I
C G J
D

And ABCDEFGHIJK would make:

A E I
B F J
C G K
D H

_“what to do when theres a remainder in the array”_ - well start by explaining what you actually _want_ to do in that case? You only gave an example for the case where there isn’t any remainder - so what result you actually want in case there is, is not even clear right now. — misorude, Feb 13 '20 at 12:45

score 1 · Answer 1 · answered Feb 13 '20 at 12:40

You could switch the indices and get a new array.

var data = [['A', 'B', 'C'], ['D', 'E', 'F'], ['G', 'H', 'I']],
    result = data.reduce((r, a, j) => {
        a.forEach((v, i) => {
            r[i] = r[i] || [];
            r[i][j] = v;
        });
        return r;
    }, []);

result.forEach(a => console.log(...a));

David · Answer 2 · 2020-02-13T12:48:43.563

0

Vanila JS: live code here

let A = [
 ['A', 'B', 'C'],
 ['D', 'E', 'F'],
 ['G', 'H', 'I'],
];

A[0].map((col, i) => A.map(row => row[i]));
A[0].map((_, i) => A.map(row => row[i])); // This also works
console.log(A);

using Ramda:

R.transpose(A);

using lodash:

_.zip.apply(_,A);

edited Feb 13 '20 at 12:48

answered Feb 13 '20 at 12:40

David

15,894
22
55
66

score 0 · Answer 3 · answered Feb 13 '20 at 12:41

Question answered here: Transposing a 2D-array in JavaScript

array[0].map((col, i) => array.map(row => row[i]));

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed. [source]

How to work re-organize array so that its sorted in columns rather than rows

3 Answers3