Question 194640 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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);
                }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search