Issue while looping 2D array javascript

Question

I'm trying a truly easy thing which is looping inside a 2D array and creating another array by checking row per row.

For example, my 2D array contains the hex colors of a range of cells from a Google Sheet. I want to check every line and verify if on of the element id either red or orange.

Here is my sample code :

var 2Darray = [ [ '#ff0000', '#000000', '#000000' ],
              [ '#000000', '#ff6d01', '#000000' ],
              [ '#000000', '#000000', '#000000' ] ]
var redHex = "#ff0000";
var orangeHex = "#ff6d01";

var newColors = [];
for (var i = 0; i < rangeColor.length; i++) {
    var keepGoing  = true; 
    for (var j = 0; j < rangeColor[i].length; j++) {
        switch (rangeColor[i][j]) {
            case redHex:
                newColors[i] = redHex;
                console.log("1")
                keepGoing = false;
                break;
            case orangeHex:
                newColors[i] = orangeHex;
                console.log("2");
                keepGoing = false;
                break;
            case "#000000":
                newColors[i] = "#000000";
                console.log("3")
                keepGoing = false;
                break;
        }
        if (!keepGoing) {
          break;
        } 
    }
}    
console.log(newColors);

My new array should be : [ '#ff0000', '#ff6d01', '#000000' ] but is [ '#ff0000', '#000000', '#000000' ] which indicates that there is an issue with my loop but I can't figure out what. Maybe the break behavior with double for loop ?

Although I'm not sure whether I could correctly understand your script, if 2Darray is rangeColor, in your script, how about removing keepGoing = false; in case "#000000":? Because when the 2nd element of the array is checked, only the 1st element is checked because keepGoing = false; at case "#000000":. If 2Darray is rangeColor, I think that by this modification, [ '#ff0000', '#ff6d01', '#000000' ] is obtained. If I misunderstood your script, I apologize. — Tanaike
– Tanaike, Commented Sep 29, 2021 at 8:31

Tanaike · Accepted Answer · 2021-09-29 08:42:21Z

Although I'm not sure whether I could correctly understand your script, if 2Darray is rangeColor, in your script, how about removing keepGoing = false; in case "#000000": as follows?

Because when the 2nd element of the array is checked, only the 1st element is checked because keepGoing = false; at case "#000000":. If 2Darray is rangeColor, I thought that this might be the reason for your issue.

And, in your script, I thought that var newColors = []; is required to be added.

When your script is modified, how about the following modification?

Modified script:

var newColors = [];
var rangeColor = [ [ '#ff0000', '#000000', '#000000' ],
              [ '#000000', '#ff6d01', '#000000' ],
              [ '#000000', '#000000', '#000000' ] ];
var redHex = "#ff0000";
var orangeHex = "#ff6d01";
for (var i = 0; i < rangeColor.length; i++) {
    var keepGoing  = true; 
    for (var j = 0; j < rangeColor[i].length; j++) {
        switch (rangeColor[i][j]) {
            case redHex:
                newColors[i] = redHex;
                console.log("1")
                keepGoing = false;
                break;
            case orangeHex:
                newColors[i] = orangeHex;
                console.log("2");
                keepGoing = false;
                break;
            case "#000000":
                newColors[i] = "#000000";
                console.log("3")
                // keepGoing = false; // Removed
                break;
        }
        if (!keepGoing) {
          break;
        } 
    }
}    
console.log(newColors);

As other method, how about the following sample script?

Sample script:

var rangeColor = [
  ['#ff0000', '#000000', '#000000'],
  ['#000000', '#ff6d01', '#000000'],
  ['#000000', '#000000', '#000000']
];
var redHex = "#ff0000";
var orangeHex = "#ff6d01";

var newColors = rangeColor.map(r => r.includes(redHex) ? redHex : r.includes(orangeHex) ? orangeHex : '#000000');
console.log(newColors) // ==> [ '#ff0000', '#ff6d01', '#000000' ]

References:

Thanks, really like your second method ! I'm not very used to js.

Preet Mehta · Accepted Answer · 2021-09-29 08:34:21Z

1

I am considering a typo in your question that 2Darray = rangeColor.

It is because, you are breaking your inner loop in the first iteration itself every time. And hence your answer is the first element of each row.

answered Sep 29, 2021 at 8:34

Preet Mehta

396 bronze badges

Collectives™ on Stack Overflow

Issue while looping 2D array javascript

2 Answers 2

Modified script:

Sample script:

References:

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Modified script:

Sample script:

References:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related