Как выбрать свойство объекта в двумерном массиве с помощью forEach ()?

Question

Я пытаюсь изменить цвет фона элемента div при нажатии в зависимости от свойства объекта, но я застрял на том, как проверить свойство для каждого объекта.

Двухмерный массив с общим размером 5x525 объектов:

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

Функция для создания таблицы HTML и установки идентификатора с 2 числами для каждого 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>");
  }
}

Добавление функции, которая добавит класс в div в зависимости отв свойстве 'bombe':

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");
 }
}

Я знаю, что этот код будет отображать true или false, но это только для одного объекта ...:

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

Любым способом, которым я могусделать это с forEach?

Answer 1

Если я правильно понял ваш вопрос, вы хотите применить определенные стили к 2d-массиву div на основе карты цветов, хранящейся в переменной.Без использования jQuery я бы пошел ленивым путем: манипулировал внутренним HTML, а не объектом DOM и рендерил все сразу (в рамках одной функции).Вы можете найти пример ниже:

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>

Answer 2

Вы можете использовать что-то вроде:

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

Обратите внимание, что вам нужно будет передать tab в качестве аргумента при использовании afficher