jQuery nested loop

Question

Current situation:

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

In the second table i want a list of vendors. item.productstock is an array but how can I loop over it inside this append table?

Two questions

Is it possible to append a for loop in the second tbody?
Is it possible to give the second table their own column names without creating duplicates

Nidhin Joseph · Accepted Answer · 2019-10-15 23:36:02Z

Firstly, to have a table inside tbody, you need to have the semantics as tbody > tr > td > table.

Secondly, you can use a function to return a string for looping inside string interpolation.

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

Max Mayorov · Accepted Answer · 2019-10-15 13:12:40Z

For the loop in the second table you need to create an extra variable.

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

But what did you mean by column names? You can use index (second parameter in forEach function) to avoid duplicated names

Do I have to add a second table append? In your example the first tbody is missing

Collectives™ on Stack Overflow

jQuery nested loop

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related