CODEWITHSUNDEEP
javascriptarraysobject
tukanium
tukanium

Reputation: 926

How to select the property of an object in a two dimensional array with forEach()?

I am trying to change the backgound color of a div when clicked depending on a property of the object but I am stuck on how to check the property for each object.

The two dimensional array with total 5x5 25 objects:

let tab = [[object{bombe: false}, object{bombe: false}, object{bombe: 
true}, object{bombe: false}, object{bombe: true}], [object{bombe: 
false}, ...

Function to create an HTML table and set an ID with 2 numbers to each div:

function afficher() {
  for (let i = 0; i < 5; ++i) {
    for (let j = 0; j < 5; ++j) {
      let element = document.createElement("div");
      element.innerHTML = "&nbsp;";
      element.id = `${i}${j}`;
      document.body.appendChild(element);
    }
    document.write("<br>");
  }
}

Add a function that would add a class to a div depending on the 'bombe' property: 

let cellules = document.querySelectorAll("div");
cellules.forEach(c => c.addEventListener("click", jeu));
 function jeu() {
  if (this.id.bombe) {
   this.setAttribute("class", "red");
   cellules.forEach(c => c.removeEventListener("click", jeu));
  } else {
   this.setAttribute("class", "grey");
 }
}

I know that this code will display true or false but this is only for one object ... :

let x = tab[0][0].bombe
console.log(x);

Any way I can do this with a forEach ?

Upvotes: 1

Views: 441

Answers (2)

user3307073
user3307073

Reputation:

If I got your question correctly, you wish to apply certain styles to 2d-array of divs based on colormap stored in a variable. Without employing jQuery, I'd go lazy way: manipulate innerHTML's rather than DOM object and render all at once (within one function). You might find an example below:

var matrix = [[{attr:false}, {attr:false}, {attr:true}, {attr:false}, {attr:true}],
[{attr:true}, {attr:false}, {attr:false}, {attr:true}, {attr:true}],
[{attr:false}, {attr:true}, {attr:true}, {attr:false}, {attr:false}],
[{attr:false}, {attr:false}, {attr:true}, {attr:false}, {attr:false}],
[{attr:true}, {attr:true}, {attr:false}, {attr:true}, {attr:false}]]

var renderer = (arg) => {
	arg.forEach((row,rownum) => {
		document.querySelector('#box').innerHTML += '<div class="row" rownum="'+rownum+'">';
		row.forEach((cell,cellnum) => {
			let conditionalClass = cell.attr ? 'grey' : 'red';
			document.querySelector('[rownum="'+rownum+'"]').innerHTML += '<div class="cell '+conditionalClass+'" cellnum="'+cellnum+'">'
		});
		document.querySelector('#box').innerHTML += '</div>';
	});

};

renderer(matrix);
.row {
    height: 30px;
}
.cell {
    width: 30px;
    height: 100%;
    float: left;
}
.red {
  background-color: red;
}
.grey {
  background-color: grey;
}
<div id="box"></div>

Upvotes: 1

vbuzze
vbuzze

Reputation: 940

You could use something like : 

function afficher(tab) {
  tab.forEach( (row, i) => {
    row.forEach( (obj, j) => {
       let element = document.createElement("div");
       element.innerHTML = "&nbsp;";
       element.id = `${i}${j}`;
       document.body.appendChild(element);
    });
    document.write("<br>");
  });
}

Note that you'll have to pass tab as an argument when using afficher

Upvotes: 0

Related Questions