如何使用 javascript 从 JSON 文件制作网格

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