如何修复JSON转Table时的表格行重复问题

Problem Description #

I'm trying to render JSON data into an HTML table, but I'm facing an issue where table rows are being duplicated. I suspect the problem is in my JavaScript code—can someone help me troubleshoot this?

Relevant Code #

HTML:

<div class="container-fluid">
  <div>
    <table class="table table-bordered d-sm-table-row" id="table">
      <tr>
        <th style="width:10%">IRB#</th>
        <th>Reg Dt</th>
        <th>Tx_Start_Dt</th>
        <th>Tx_End_Dt</th>
        <th>Off_Study Dt</th>
        <th style="width:100%">IRB_Title</th>
        @*<th>Arm_Descr</th>*@
      </tr>
    </table>
  </div>
</div>

JavaScript:

$.ajax({
  url: "https://tsrv/Get-Irb-Protos/by-mrn?format=json",
  headers: {
    "Authorization": "042a9ff198c046eaf21|API Testing Script"
  },
  contentType: 'application/json',
  dataType: 'json',
  type: 'post',
  data: JSON.stringify({ "id": "35528329" })
}).done(function (data) {
  /*$('#monitor_data').append(JSON.stringify(data))*/
  //console.log(data);
  $.each(data, function () {
    for (var i = 0; i < data.rows.length; i++) {
      var tr = $('<tr/>');
      tr.append("<td>" + data.rows[i][0] + "</td>");
      tr.append("<td>" + data.rows[i][1] + "</td>");
      tr.append("<td>" + data.rows[i][2] + "</td>");
      tr.append("<td>" + data.rows[i][3] + "</td>");
      tr.append("<td>" + data.rows[i][4] + "</td>");
      tr.append("<td>" + data.rows[i][5] + "</td>");
      //tr.append("<td>" + data.rows[i][6] + "</td>");
      $('table').append(tr);
    }
  });
});

Expected Result #

Table rows should render without duplication.

Answer #

Got it, the issue is right there in your nested loops! You're wrapping the for loop that iterates over data.rows inside a $.each(data, ...) call.

Here's why that causes duplication: $.each(data, function()) will loop over every enumerable property in the data object. If your data object has more than just the rows property (or even if it only has rows), this outer loop will run once per property—and each time it runs, it executes the entire inner for loop that appends all the rows again. So if data has 2 properties, you'll get twice as many rows as you need.

The fix is simple: remove the outer $.each entirely. You don't need it—just directly loop over data.rows with your for loop, or even use $.each on data.rows instead if you prefer jQuery's syntax.

Here's the corrected JavaScript code using your original for loop approach:

$.ajax({
  url: "https://tsrv/Get-Irb-Protos/by-mrn?format=json",
  headers: {
    "Authorization": "042a9ff198c046eaf21|API Testing Script"
  },
  contentType: 'application/json',
  dataType: 'json',
  type: 'post',
  data: JSON.stringify({ "id": "35528329" })
}).done(function (data) {
  /*$('#monitor_data').append(JSON.stringify(data))*/
  //console.log(data);
  // Remove the outer $.each, directly loop over data.rows
  for (var i = 0; i < data.rows.length; i++) {
    var tr = $('<tr/>');
    tr.append("<td>" + data.rows[i][0] + "</td>");
    tr.append("<td>" + data.rows[i][1] + "</td>");
    tr.append("<td>" + data.rows[i][2] + "</td>");
    tr.append("<td>" + data.rows[i][3] + "</td>");
    tr.append("<td>" + data.rows[i][4] + "</td>");
    tr.append("<td>" + data.rows[i][5] + "</td>");
    //tr.append("<td>" + data.rows[i][6] + "</td>");
    $('table').append(tr);
  }
});

Or if you'd rather use jQuery's $.each for consistency, you can rewrite the loop like this:

$.ajax({
  // ... existing AJAX config ...
}).done(function (data) {
  // Loop directly over data.rows with $.each
  $.each(data.rows, function(index, row) {
    var tr = $('<tr/>');
    tr.append("<td>" + row[0] + "</td>");
    tr.append("<td>" + row[1] + "</td>");
    tr.append("<td>" + row[2] + "</td>");
    tr.append("<td>" + row[3] + "</td>");
    tr.append("<td>" + row[4] + "</td>");
    tr.append("<td>" + row[5] + "</td>");
    $('table').append(tr);
  });
});

Either way, this will ensure each row from your JSON is appended exactly once to the table.

内容的提问来源于stack exchange，提问作者DotNet Coder