Как сделать сетку из файла JSON с javascript

Question

Мне нужно создать сетку с файлом json, например:

{"warehouses":[{"name":"Kleding","location":"Amsterdam","tiles":[[{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null}],[{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null}],[{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null},{"blocked":false,"product":null}],[{"blocked":false,"product":{"name":"Big wang","img":"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAG2OL4.img?h=0&w=720&m=6&q=60&u=t&o=f&l=f",

Я уже загрузил данные с этим кодом:

    for(let index in data){
        let li = document.createElement('li');
        li.innerHTML = data[index].name;
        alert(data[index])
        document.querySelector('ul').appendChild(li);
    }
}

fetch('/resources/data.json', {mode: 'no-cors'})
.then(response => response.json())
.then(data => {
    console.log(data);
    addData(data);
})
.catch(error => console.error("Error")); 

Но как мне сделать из этого сетку?

(сетка выглядит как набор квадратов 15x15, некоторые черные, некоторые белые, а некоторые содержат продукт внутри.)

Answer 1

Ваши данные достаточно глубоко вложены, поэтому вам понадобится несколько вложенных циклов для построения необходимой структуры, например:

for (let warehouse of data.warehouses) {
    console.log(`Build "${warehouse.name}" warehouse table`);

    for (let tile of warehouse.tiles) {
        console.log("\tBuild tile tr");

        for (let block of tile) {
            if (block.product) {
                console.log(`\t\tBuild "${block.product.name}" product square td`);
            } else {
                console.log("\t\tBuild empty square td");
            }
        }
    }
}