0

I am building a connect 4 app in react. While checking the condition for a draw(tie), I am not able to loop through the array built with Fill Function (7 by 6) array.

    state = {
    columnGrid: new Array(7)
          .fill(0)
          .map(() => new Array(6).fill(null)),
     }      
    const test = this.state.columnGrid.slice();

Result of console.log(test):

    (7) [Array(6), Array(6), Array(6), Array(6), Array(6), Array(6), 
    Array(6)]
    0: (6) [null, null, null, null, null, null]
    1: (6) [null, null, null, null, null, null]
    2: (6) [null, null, null, null, null, null]
    3: (6) [null, null, null, null, null, null]
    4: (6) [null, null, null, null, null, null]
    5: (6) [null, null, null, null, null, null]
    6: (6) ["/static/media/golden.d6314cc9.png", null, null, null, null, 
    null]

I need to loop through all the arrays and check for the condition whether the array!== null

Aniket
  • 982
  • 1
  • 11
  • 16
  • 1
    What have you tried so far (_"i am not able to loop through array"_)? Preferable as a [mcve] (use a snippet -> `< >` / Ctrl+M) – Andreas May 25 '19 at 11:04
  • How does the last row have a string value if every column is filled with `null`? – adiga May 25 '19 at 11:05
  • last row is string because on the last row coin is placed when clicked @adiga – Aniket May 25 '19 at 11:09
  • What is the expected output? Do you want to check if every element is null or at least one element per row is null – adiga May 25 '19 at 11:10
  • i just want to check whether the board is filled or not by putting a condition those arrays are not null for eg if(every array is not null) { then its a draw } so just wanted to check whether every element in an array is null or not – Aniket May 25 '19 at 11:12
  • It would be helpful if you would provide the expected output (literally) for the sample input, because it is now not entirely clear whether you want just `true` or `false` as output, or an array of `true` or `false`, or a count, or an array which is reduced to certain rows, ...etc. – trincot May 25 '19 at 11:31

2 Answers2

1

You can use a double filter. Something like:

const test = [
 [null, null, null, null, null, null],
 [null, null, null, null, null, null],
 [null, null, null, null, null, null],
 [null, null, null, null, null, null],
 [null, null, null, null, null, null],
 [null, null, null, null, null, null],
 ["/static/media/golden.d6314cc9.png", null, null, null, null,null]
]
.filter(t => 
  t.filter(tt => tt != null).length > 0);
console.log(test);

i just want to check whether the board is filled or not by putting a condition those arrays are not null for eg if(every array is not null) { then its a draw } so just wanted to check whether every element in an array is null or not

In that case:

const testArray = [
     [null, null, null, null, null, null],
     [null, null, null, null, null, null],
     [null, null, null, null, null, null],
     [null, null, null, null, null, null],
     [null, null, null, null, null, null],
     [null, null, null, null, null, null],
     ["/static/media/golden.d6314cc9.png", null, null, null, null,null]
];
const allSubArraysContainAtLeastOneValue = 
    testArray.filter(t => 
      t.filter(tt => tt != null).length)
    .length === testArray.length;

console.log(
  `Did every subarray of testArray contain at least one value? ${
    allSubArraysContainAtLeastOneValue
      ? "yes :D" 
      : "nope :("}`);
KooiInc
  • 119,216
  • 31
  • 141
  • 177
  • @james, when I press "Run" on that snippet it works. Please be *precise* in your question (edit it!) what the output is that you expect. – trincot May 25 '19 at 11:32
1

The following will give you a boolean for each row, which will indicate whether that row is null or not, i.e. true for rows that have at least one non-null value:

var columnGrid = new Array(7)
    .fill(0)
    .map(() => new Array(6).fill(null));

columnGrid[6][0] = "test";

var isnull = columnGrid.map(row => row.some(Boolean));

console.log(isnull); 

The Boolean callback will actually look for "truthy" values, so non-empty strings will qualify. However, if your array would only have 0 or empty strings, it will not qualify as a non-null array. If you want that changed, then don't pass Boolean, but a => a !=== null as callback to some. But if your actual case is that the values are either null or a non-empty string, the above code will do the trick.

trincot
  • 317,000
  • 35
  • 244
  • 286
  • trincot can you please help me by specifying what does some(boolean) stands for? yea i wannted to have a array of true or false as a output – Aniket May 25 '19 at 11:43
  • [`some`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some) is an array method. It returns a boolean. It will be true when it finds an element that -- when passed to the callback function -- returns true. That callback function is here [`Boolean`](https://stackoverflow.com/a/15970704/5459839), which will return true for a non-empty string. I updated my answer to return an array of booleans. – trincot May 25 '19 at 14:03