JQuery вложенный цикл

Question

Текущая ситуация:

if (data && Array.isArray(data.results)) {
    data.results.forEach(item => {
        table.append
            (`<tbody class="js-table-sections-header table-active">
            <tr>
                <td class="text-center">
                    <i class="fa fa-angle-right"></i>
                </td>
                <td class="font-w600">${item.id}</td>
                <td>
                    <span class="badge badge-success">${item.name}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.vendor}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.desc}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.price}</span>
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td class="text-center"></td>
                <td class="font-w600 text-success">${item.productstock.vendor_specific_id}</td>
                <td class="font-size-sm">${item.productstock.distributor}</td>
                <td class="font-size-sm">${item.productstock.stock}</td>
                <td class="font-w600 text-success">${item.productstock.price_override}</td>
            </tr>                    
        </tbody>`);
    });
}   

Во второй таблице я хочу список поставщиков. item.productstock - это массив, но как мне зациклить его внутри этой таблицы дополнений?

Два вопроса

• Возможно ли этодобавить цикл for во второй tbody?
• Можно ли присвоить второй таблице собственные имена столбцов без создания дубликатов

Answer 1

Во-первых, чтобы иметь таблицу внутри tbody, вам необходимо иметь семантику tbody> tr> td> table.

Во-вторых, вы можете использовать функцию, чтобы вернуть строку для цикла внутри интерполяции строки.

if (data && Array.isArray(data.results)) {
    data.results.forEach(item => {
        table.append
            (`<tbody class="js-table-sections-header table-active">
                        <tr>
                            <td class="text-center">
                                <i class="fa fa-angle-right"></i>
                            </td>
                            <td class="font-w600">${item.text}</td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td>
                                <span class="badge badge-success">${item.sku}</span>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <em class="text-muted">${item.price}</em>
                            </td>
                            <td class="d-none d-sm-table-cell">
                                <em class="text-muted">${item.price}</em>
                            </td>
                        </tr>
                    </tbody>
                    <tbody>
                        <tr>
                            <td class="text-center" colspan="18">
                                <table>
                                    <tr>
                                        <th>vendor_specific_id</th>
                                    </tr>
                                    ${ populateStock(item.productstock) }
                                </table>
                            </td>
                        </tr>
                    </tbody>`);
    });

    function populateStock(productstock) {
        let final_str = '';
        productstock.forEach(item => {
            final_str += `
            <tr>
                <td class="font-w600 text-success">${item.vendor_specific_id}</td>
                <td class="font-size-sm">${item.distributor}</td>
                <td class="font-size-sm">${item.stock}</td>
                <td class="font-w600 text-success">${item.price_override}</td>
            </tr>`
        });
        return final_str;
    }
}  

Answer 2

Для цикла во второй таблице необходимо создать дополнительную переменную.

if (data && Array.isArray(data.results)) {
    data.results.forEach(item => {
        const products = item.productstock.forEach((product, index) => 
            `<tbody>
            <tr>
                <td class="text-center"></td>
                <td class="font-w600 text-success">${product.vendor_specific_id}</td>
                <td class="font-size-sm">${product.distributor}</td>
                <td class="font-size-sm">${product.stock}</td>
                <td class="font-w600 text-success">${product.price_override}</td>
            </tr>                    
        </tbody>`);
        table.append
            (`<tbody class="js-table-sections-header table-active">
            <tr>
                <td class="text-center">
                    <i class="fa fa-angle-right"></i>
                </td>
                <td class="font-w600">${item.id}</td>
                <td>
                    <span class="badge badge-success">${item.name}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.vendor}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.desc}</span>
                </td>
                <td>
                    <span class="badge badge-success">${item.price}</span>
                </td>
            </tr>
        </tbody>
        ${products}`);
    });
}   

Но что вы имели в виду под именами столбцов? Вы можете использовать index (второй параметр в функции forEach), чтобы избежать дублирования имен