How can I populate data into a table using a loop?

Question

I am populating data in jQuery into multiple html tables but everything after the second row keeps printing outside of the table.

I created a fiddle here to show what's happening

https://jsfiddle.net/s81zb7ga/

I cannot work out why it keeps printing outside of the table.

My code with the loop is below:

                var title = '';
                $('#results_credentials').html("");
                for(var i in data) {
                    var m = '';

                    var end_of_tbl = '</tbody>';
                    end_of_tbl += '</table>';
                    end_of_tbl += '</div>';
                    end_of_tbl += '</div>';
                    end_of_tbl += '</div>';

                    if(title !== data[i].title) {
                        if(title !== "") {
                            m += end_of_tbl;
                        }

                        title = data[i].title;
                        
                        m += '<div class="panel-collapse box box-warning">';
                        m += '<div class="box-header">';
                        m += '<h3 class="box-title">';
                        m += '<a href="#box_expand_' + data[i].sequence + '" data-toggle="collapse" id="credential_title_' + data[i].sequence + '">' + data[i].title + '</a>';
                        m += '</h3>';
                        m += '</div><!-- /.box-header -->';
                        
                        m += '<div class="box-body panel-collapse collapse2" id="box_expand_' + data[i].sequence + '">';
                        m += '<div class="table-responsive">';
                        m += '<table class="table table-bordered table-hover">';
                        m += '<thead>';
                        m += '<tr>';
                        m += '<th class="credential_group credential_group_' + data[i].title.replace(' ', '_') + '">Group</th>';
                        m += '<th>Note</th>';
                        m += '<th>Username</th>';
                        m += '<th>Password</th>';
                        m += '<th>Updated</th>';
                        m += '<th colspan="2">Actions</th>';
                        m += '</tr>';
                        m += '</thead>';
                        m += '<tbody>';
                    }

                    m += '<tr id="credential_row_' + data[i].sequence + '">';
                    m += '<td colspan="7">test</td>';
                    m += '</tr>';

                    $('#results_credentials').append(m);
                }

You are building an incomplete html table and appending piece by piece. Append does not work like writing a string. When you append incomplete html, the browser auto closes tags you left open. So when you append the first rows, it closes the table. All the other rows appear after the closed table. — epascarello, Jun 26 '23 at 17:55
@epascarello oh, I see. I'm not great with JS/Jquery, more PHP. But that makes sense, I just took the append outside of the loop and its working! thank you very much — charlie, Jun 26 '23 at 18:00
Consider modifying your data such that it's already grouped by title - then you can do this with two loops. https://stackoverflow.com/a/40774906/4378740 — chakeda, Jun 26 '23 at 18:00

score 1 · Accepted Answer · edited Jun 26 '23 at 18:22

1

As per epascarello's comment, it turns out the tags were automatically being closed by the browser.

So by moving var m = ''; and $('#results_credentials').append(m); outside of the for loop, it appends the whole table and data at once and therefore doesn't break the HTML.

edited Jun 26 '23 at 18:22

isherwood

58,414
16
114
157

answered Jun 26 '23 at 18:01

charlie

415
4
35
83

Hardik Uchdadiya · Answer 2 · 2023-06-26T18:24:04.013

So there are other ways to generate dynamic content with jQuery. You can follow something as below:

var data = '[{"sequence":"9753","updated":"26\/06\/2023 18:26:33","updated_by":"Charlie Ford","title":"GroupTest","data":{"note":"2","username":"user","password":"pass"}},{"sequence":"9755","updated":"26\/06\/2023 18:26:41","updated_by":"Charlie Ford","title":"GroupTest","data":{"note":"1","username":"2","password":"3"}},{"sequence":"9756","updated":"26\/06\/2023 16:57:02","updated_by":"Charlie Ford","title":"1","data":{"note":"1","username":"1","password":"1"}}]';
$('#results_credentials').html("");
$($.parseJSON(data)).each(function(i, obj) {

  //console.log(obj);


  var panelDiv = $("<div/>").attr({
    "class": "panel-collapse box box-warning"
  });
  var boxHeaderDiv = $("<div/>").attr({
    "class": "box-header"
  });
  var h3Tag = $("<h3/>").attr({
    "class": "box-title"
  });
  var aTag = $("<a/>").attr({
    "href": "#box_expand_" + obj.sequence,
    "data-toggle": "collapse",
    "id": "credential_title_" + obj.sequence
  }).html(obj.title);

  $(h3Tag).append(aTag);
  $(boxHeaderDiv).append(h3Tag);
  $(panelDiv).append(boxHeaderDiv);
  $('#results_credentials').append(panelDiv);

  var contentDiv = $("<div/>").attr({
    "class": "box-body panel-collapse collapse2",
    "id": "box_expand_" + obj.sequence
  });
  var tableDiv = $("<div/>").attr({
    "class": "table-responsive"
  });
  var tableTag = $("<table/>").attr({
    "class": "table table-bordered table-hover",
    "border": "1"
  });
  var headerTag = $("<thead/>");
  var headerTr = $("<tr/>");
  var titleTh = $("<th/>").attr({
    "class": "credential_group credential_group_" + obj.title
  }).html("Group");
  var noteTh = $("<th/>").html("Note");
  var usernameTh = $("<th/>").html("Username");
  var passwordTh = $("<th/>").html("Password");
  var updatedTh = $("<th/>").html("Updated");
  var actionsTh = $("<th/>").attr({
    "colspan": "2"
  }).html("Actions");
  $(headerTr).append(titleTh);
  $(headerTr).append(noteTh);
  $(headerTr).append(usernameTh);
  $(headerTr).append(passwordTh);
  $(headerTr).append(updatedTh);
  $(headerTr).append(actionsTh);
  $(headerTag).append(headerTr);
  $(tableTag).append(headerTag);


  var tbodyTag = $("<tbody/>");
  var dataTr = $("<tr/>");
  var titleTd = $("<td/>").html(obj.title);
  var noteTd = $("<td/>").html(obj.data.note);
  var usernameTd = $("<td/>").html(obj.data.username);
  var passwordTd = $("<td/>").html(obj.data.password);
  var updatedTd = $("<td/>").html(obj.updated);
  var actiondTd = $("<td/>").html("");

  $(dataTr).append(titleTd);
  $(dataTr).append(noteTd);
  $(dataTr).append(usernameTd);
  $(dataTr).append(passwordTd);
  $(dataTr).append(updatedTd);
  $(dataTr).append(actiondTd);
  $(tbodyTag).append(dataTr);
  $(tableTag).append(tbodyTag);
  $('#results_credentials').append(tableTag);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results_credentials">

</div>

How can I populate data into a table using a loop?

2 Answers2