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.)
Your data is quite deeply nested, so you'll need several nested loops to build the requisite structure e.g: