如何从JSON重建表格？现有实现代码存在显示异常

Let's break down why your current code is causing display issues, then fix it up to work as expected.

What's Wrong With the Original Code? #

Your code has two main issues that lead to wonky table output:

1. You're inserting arrays directly into table cells: When you put data[i][colHeader[j]] (which is an array like ["Papa","Nonna"]) into a <td>, JavaScript automatically converts it to a comma-separated string (e.g. Papa,Nonna), which is probably not how you want your data displayed.
2. Semantic & robustness gaps: You're using <td> for header cells (use <th> instead for better semantics), and there's no check for whether the base table structure exists in your HTML (if it doesn't, your jQuery selectors will fail silently).

Solution 1: Display Array Elements on New Lines in Cells #

If you want all values from a column's array to live in the same cell (stacked vertically), use this version. It joins array elements with <br> tags to create line breaks:

<!-- First, make sure you have a base table structure (or let the JS create it) -->
<table border="1">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>

var data = [{"Mamma":["Papa","Nonna"],"Hello":["Bye","Yes"]}];
var colHeader = Object.keys(data[0]);

// Fallback: create the table if it doesn't exist in the DOM
if (!$('table').length) {
  $('body').append('<table border="1"><thead><tr></tr></thead><tbody></tbody></table>');
}

// Render table headers (using semantic <th> tags)
colHeader.forEach(header => {
  $('table thead tr').append(`<th>${header}</th>`);
});

// Render table body rows
data.forEach(rowData => {
  const newRow = $('<tr></tr>');
  colHeader.forEach(header => {
    // Convert arrays to line-broken strings; handle non-array values just in case
    const cellContent = Array.isArray(rowData[header]) 
      ? rowData[header].join('<br>') 
      : rowData[header];
    newRow.append(`<td>${cellContent}</td>`);
  });
  $('table tbody').append(newRow);
});

Solution 2: Split Array Elements Into Separate Rows #

If you want each element from the arrays to occupy its own table row (e.g. one row for Papa/Bye, another for Nonna/Yes), use this approach. It calculates the longest array length to ensure all rows are filled:

<table border="1">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>

var data = [{"Mamma":["Papa","Nonna"],"Hello":["Bye","Yes"]}];
var colHeader = Object.keys(data[0]);

// Fallback: create the table if it doesn't exist
if (!$('table').length) {
  $('body').append('<table border="1"><thead><tr></tr></thead><tbody></tbody></table>');
}

// Render headers
colHeader.forEach(header => {
  $('table thead tr').append(`<th>${header}</th>`);
});

// Get the longest array length to know how many rows we need
const maxRowCount = Math.max(...colHeader.map(header => data[0][header].length));

// Create a row for each index in the arrays
for (let rowIndex = 0; rowIndex < maxRowCount; rowIndex++) {
  const newRow = $('<tr></tr>');
  colHeader.forEach(header => {
    // Grab the value at the current row index, or use an empty string if it doesn't exist
    const cellValue = data[0][header][rowIndex] || '';
    newRow.append(`<td>${cellValue}</td>`);
  });
  $('table tbody').append(newRow);
}

Key Improvements #

• Uses semantic <th> for header cells instead of <td>
• Adds a fallback to create the table if it's missing from your HTML
• Handles array values explicitly for clean display
• Uses modern forEach loops for readability (instead of old-school for loops)

内容的提问来源于stack exchange，提问作者rob.m