On my webpage, I pull in two sets of JSON data: 1) warehouses and 2) items. After receiving an Ajax search response from my view, I need to dynamically generate the TDs of a table based on the warehouses information.
The goal is to populate all TDs for every available warehouse listed in the JSON. If a product has stock at a particular warehouse PK, then I also want to display the quantity simultaneously.
tableBody.innerHTML += `
[...]
<td>${item.fournisseur__nom}</td>`;
JSON.parse(warehouses).forEach((wh) => {
tableBody.innerHTML += `
<td>
`;
for (let i = 0; i < item.sststock.length; i++) {
if (item.sststock[i].sst_id == wh.pk) {
tableBody.innerHTML += item.sststock[i].qty;
}
};
tableBody.innerHTML += `
</td>
`;
});
tableBody.innerHTML += `
<td>${item.qty}</td>
[...]
Here is the resulting output: https://i.sstatic.net/KoLkx.png
I observed that even when I remove the "for i" loop, a <tr></tr> gets inserted between the two <td> elements. And when I reintroduce the loop, it causes a <tr> to appear between each <td>. Any insights into why this behavior occurs?