How to make inner loop in jQuery using $.each

Question

I have developed generated dynamic tables and rows in jQuery based on input value. I am facing problem when I am trying to make inner loop using $.each. But it is not giving proper output.

$('#box').click(function () {

    $.ajax({
        type: 'POST',
        url: '@routes.Application.getB()',
        data: {
            truckid: 'ean123'
        },
        beforeSend: function () {

        },
        success: function (data) {

            $("#ajaxload").hide();
            $.each(data, function (i, item) {
                $("#box_content").append('<table  class="boxtablestructure">');
                $("#box_content").append('<th >No : ' + data[i] + '</th>');
                $("#box_content").append('<tr>');
                $("#box_content").append('<th style=""> Rollno</th>');
                $("#box_content").append('<tbody>');
                $("#box_content").append('</tbody>');
                $("#box_content").append('</table></br>');

                $.ajax({
                    type: 'POST',
                    url: '@routes.Application.getU()',
                    data: {
                        docid: data[i]
                    },
                    beforeSend: function () {

                    },
                    success: function (items) {

                        $.each(items, function (j, item) {

                            $("#box_content").find("tbody").append('<tr>');
                            $("#box_content").find("tbody").append('<td>' + item + '</td>');
                            $("#box_content").find("tbody").append('</tr>');

                        });
                    }
                });

            });

In the above code getB() function return some values, with that value tables will be generated. If getB() returns length 2 then two tables will be generated. It was generated successfully. then Each table should generated row and columns based on getB() value. Here is the problem, all the values are assigned to each table. For example getB() return 1010,1011. My need is will pass 1010 ajax parameter in inner $.each and it is returning some values corresponding to 1010. I need to assign this as same table rows.

No: 1010
-----------------------------
Rollno
-----------------------------
1234
1235


No 1011
--------------------------------
Rollno
---------------------------------
1236
1237

the above is my expected output, but I am getting:

No 1010
---------------------------------
Rollno
---------------------------------
1234
1235
1236
1237

No 1011
----------------------------------
Rollno 
----------------------------------
1234
1235
1236
1237

Please anyone help me

Answer 1

Try your success callback like,

success: function (data) {
        $("#ajaxload").hide();
        $.each(data, function (i, item) {
            // creates table and its header
            var table='<table  class="boxtablestructure">';
            table += '<tr><th>No : '+data[i]+'</th></tr>';
            table += '<tr><th style=""> Rollno</th></tr>';
            table += '</table></br>';
            // append table in box_content
            $("#box_content").append(table);

            // creates tbody and append to last inserted table
            var $tbody = $('<tbody>').appendTo('#box_content table:last');

            $.ajax({
                type: 'POST',
                url: '@routes.Application.getU()',
                data: {
                    docid: data[i]
                },
                beforeSend: function () {
                },
                success: function (items) {
                    // append the rows in last created table body
                    $.each(items, function (j, item) {
                        $tbody.append('<tr><td>' + item + '</td></tr>');
                    });
                }
            });

        });
  } // end success callback

Answer 2

You can't use .append() like a string concatenation operator, try

$('#box').click(function () {

    $.ajax({
        type: 'POST',
        url: '@routes.Application.getB()',
        data: {
            truckid: 'ean123'
        },
        beforeSend: function () {

        },
        success: function (data) {

            $("#ajaxload").hide();
            $.each(data, function (i, item) {
                var $table = $('<table  class="boxtablestructure">' +
                    '<th >No : ' + data[i] + '</th>' +
                    '<tr>' +
                    '<th style=""> Rollno</th>' +
                    '<tbody>' +
                    '</tbody>' +
                    '</table><br />').appendTo('#box_content'),
                    $tbody = $table.find('tbody');

                $.ajax({
                    type: 'POST',
                    url: '@routes.Application.getU()',
                    data: {
                        docid: data[i]
                    },
                    beforeSend: function () {

                    },
                    success: function (items) {

                        $.each(items, function (j, item) {
                            var $tr = $('<tr />');

                            $tr.append('<td>' + item + '</td>');

                            $tr.appendTo($tbody)
                        });
                    }
                });

            });