Django + Javascript : Колонки таблицы строятся динамически с помощью данных JSON. Структура строк нарушена

Я получаю на своей странице (шаблон Django) 2 набора данных : 1: склады 2: товары. С первым я хочу динамически создать TD моей таблицы после получения ответа Ajax поиска от моего представления.

Я хочу создать все TD для всех складов, доступных в JSON складов, и если продукт имеет запас на этом складе PK, в то же время, я заполняю QTY

                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>

                    [...]

Увы, вот результат : enter image description here

Также новичок в JS, я не понимаю, почему мне нужно дважды json.PARSE мои данные складов, один раз в верхней части моего скрипта, а другой раз, когда я foreach Склады для строительства TD. Иначе возникает ошибка warehouses.forEach is not a function.

JSON Хранилища :

[{"model": "warehouses.warehouse", "pk": 1, "fields": {"code": "TRE"}}, {"model": 
 "warehouses.warehouse", "pk": 2, "fields": {"code": "BAG"}}, {"model": 
 "warehouses.warehouse", "pk": 3, "fields": {"code": "DROP"}}, {"model": 
 "warehouses.warehouse", "pk": 4, "fields": {"code": "RN3"}}]

Я передаю данные своего склада в шаблон, используя тег json_script :

{{ js_warehouses|json_script:"warehouses" }}

Несмотря на многократные предыдущие поиски, я еще не слышал о insertRow() и insertCell() в JS.

Даже если я все еще не понимаю, почему innerHTML <td> не работает, я изменил свой код с этими 2 функциями и результат в порядке.

const tableBody = document.querySelector('.table-body');
var newRow = tableBody.insertRow(-1);  // -1 = at the end of the table
var newCell = newRow.insertCell(0);  // 0 = at the 0 index
newCell.innerHTML = item.etat;
[...]
JSON.parse(warehouses).forEach((wh) => {
         var newCell = newRow.insertCell(-1);
         for (let i = 0; i < item.sststock.length; i++) {
             if (item.sststock[i].warehouse_id == wh.pk) {
                 newCell.innerHTML = item.sststock[i].qty;
             }
         };
    });
Вернуться на верх