How to make a grid from a JSON file with javascript

Question

I need to make a grid with a json file like this:

{"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",

I already loaded in the data with this code:

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

But how do I make a grid out of this?

(the grid looks like a 15x15 set of squares some are black, some are white and some have a product inside.)

Answer 1

Your data is quite deeply nested, so you'll need several nested loops to build the requisite structure e.g:

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