JavaScript JSON转表格输出异常：仅打印表头无数据求助

嘿，我懂这种刚上手JavaScript就碰到卡壳问题的烦躁！咱们来一步步排查解决你的问题～

常见问题原因&解决方案 #

你遇到的核心问题大概率是没有正确访问到JSON里的countries数组，或者没把JSON字符串解析成可操作的JavaScript对象，咱们来逐个击破：

1. 先确保JSON字符串被正确解析

如果你的数据是字符串形式（比如从接口拿到的、或者你写的带引号的字符串），必须先用JSON.parse()把它转换成JavaScript对象，不然根本没法遍历里面的数组：

// 注意：你的JSON要保证语法完整，你给的示例最后一个对象没闭合，先补全哦
const jsonString = `{ 
  "countries": [ 
    {"name": "France", "population": "66000000", "capital": "Paris", "currency": "eur"}, 
    {"name": "Germany", "population": "82620000", "capital": "Berlin", "currency": "eur"}, 
    {"name": "Norway", "population": "5233000", "capital": "Oslo", "currency": "nok"} 
  ] 
}`;

// 解析成JS对象
const data = JSON.parse(jsonString);
// 拿到真正要遍历的countries数组
const countriesList = data.countries;

2. 正确遍历数组生成表格行

你已经成功生成了表头，接下来要遍历countriesList数组，给每个国家生成一行数据。这里给你完整的可运行代码示例：

// 假设你的HTML里有一个空表格：<table id="countryTable"></table>
const table = document.getElementById('countryTable');

// 生成表头（如果还没做的话）
const headerRow = table.insertRow();
// 用第一个国家的键作为表头
Object.keys(countriesList[0]).forEach(key => {
  const th = document.createElement('th');
  th.textContent = key;
  headerRow.appendChild(th);
});

// 遍历每个国家，生成数据行
countriesList.forEach(country => {
  const row = table.insertRow();
  // 把每个国家的属性值填入单元格
  Object.values(country).forEach(value => {
    const cell = row.insertCell();
    cell.textContent = value;
  });
});

3. 额外注意：检查JSON格式合法性

你提供的JSON示例最后一个对象是不完整的（{"name"... }），这种不合法的JSON会导致JSON.parse()报错，直接中断代码执行。一定要保证JSON的引号配对、逗号正确、对象/数组都闭合。

快速排查清单 #

• ✅ 有没有用JSON.parse()处理你的JSON字符串？
• ✅ 是不是直接访问了data.countries而不是整个data对象？
• ✅ 你的JSON是不是完全合法的（没有语法错误）？

按照上面的步骤调整代码，应该就能正常显示表格数据啦！

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