2d array manipulation in javascript

Question

I have a 2d array in the following format:

export const dataBubble = [
  [0, 0, 0],
  [0, 1, 0],
  [0, 2, 0],
  [0, 3, 0],
  [0, 4, 0],
  [0, 5, 0],
  [0, 6, 0],
  [0, 7, 0],
  [0, 8, 0],
  [0, 9, 0],
  [0, 10, 0],
  [1, 0, 6],
  [1, 1, 8],
  [1, 2, 5],
  [1, 3, 6],
  [1, 4, 1],
  [1, 5, 4],
  [1, 6, 5],
  [1, 7, 5],
  [1, 8, 4],
  [1, 9, 3],
  [1, 10, 9],
  [2, 0, 5],
  [2, 1, 5],
  [2, 2, 5],
  [2, 3, 6],
  [2, 4, 8],
  [2, 5, 7],
  [2, 6, 8],
  [2, 7, 5],
  [2, 8, 4],
  [2, 9, 2],
  [2, 10, 8],
  [3, 0, 9],
  [3, 1, 5],
  [3, 2, 9],
  [3, 3, 8],
  [3, 4, 5],
  [3, 5, 4],
  [3, 6, 2],
  [3, 7, 5],
  [3, 8, 7],
  [3, 9, 6],
  [3, 10, 3],
  [4, 0, 7],
  [4, 1, 3],
  [4, 2, 9],
  [4, 3, 5],
  [4, 4, 11],
  [4, 5, 6],
  [4, 6, 7],
  [4, 7, 6],
  [4, 8, 4],
  [4, 9, 4],
  [4, 10, 5],
  [5, 0, 1],
  [5, 1, 3],
  [5, 2, 6],
  [5, 3, 8],
  [5, 4, 5],
  [5, 5, 5],
  [5, 6, 4],
  [5, 7, 8],
  [5, 8, 9],
  [5, 9, 2],
  [5, 10, 4],
  [6, 0, 2],
  [6, 1, 1],
  [6, 2, 0],
  [6, 3, 3],
  [6, 4, 8],
  [6, 5, 5],
  [6, 6, 6],
  [6, 7, 2],
  [6, 8, 5],
  [6, 9, 6],
  [6, 10, 4],
  [7, 0, 1],
  [7, 1, 0],
  [7, 2, 5],
  [7, 3, 0],
  [7, 4, 5],
  [7, 5, 8],
  [7, 6, 9],
  [7, 7, 0],
  [7, 8, 7],
  [7, 9, 8]
];

We need to reverse the array elements based on the first two elements of the inner array, such that the resultant array becomes:

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

I use this in a react js project, so is there anyway we can use the JS map function of an array to do it? If not what will be the optimal solution?

There is not enough information here: are the values limited to some range? The first value in the subarrays seems to be between 0 and 7, and the second value between 0 and 10? Such constraints may determine which solution to propose. — trincot
– trincot, Commented Aug 10, 2021 at 14:55
The subarrays second value may vary but first value will always be 0 to 7 — Sujith Elango
– Sujith Elango, Commented Aug 11, 2021 at 2:35

starikcetin · Accepted Answer · 2021-08-10 16:12:03Z

1

If your second value is guaranteed to be less than an amount (for example I assumed 1000 in this case) then you can do this:

dataBubble.sort((x, y) => (x[0] - y[0])*1000 + y[1] - x[1]);

Basically we sum them up, but give the first element a higher coefficient, thus making it the primary sorter.

Otherwise, you need to involve an if check:

dataBubble.sort((x, y) => {
  if(x[0] == y[0]) {
    return y[1] - x[1];
  } else {
    return x[0] - y[0];
  }
});

If you return a negative value from the sort function, JS will put x before y. Otherwise it will put x after y.

If x[0] and y[0] are equal, we need to sort depending on x[1] and y[1]. y[1] - x[1] will be negative if x[1] is larger, therefore if x[1] is larger x will come before y.
If x[0] and y[0] are different we need to sort based on them. x[0] - y[0] will be negative if x[0] is smaller, therefore if x[0] is smaller, x will come before y.

edited Aug 10, 2021 at 16:12

answered Aug 10, 2021 at 14:56

starikcetin

1,5081 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sujith Elango Over a year ago

The first solution will also work fine in this scenario, consider it as a scale of x axis in a graph with interval 1.

Collectives™ on Stack Overflow

2d array manipulation in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related