如何将JSON嵌套数组数据展示到HTML页面？问题修复求助

看起来你遇到的核心问题是没有正确访问JSON里的嵌套数组结构，同时页面顶部的学生姓名和年级也没被填充。咱们一步步来解决：

1. 先理清你的JSON结构 #

首先把你的JSON格式化一下，方便看清楚层级关系：

{
  "students": [
    {
      "studentname": "Rohit Kumar",
      "grade": "A",
      "student": [
        { "SNo": "1", "Subject": "Maths", "Concept": "Numbers" },
        { "SNo": "2", "Subject": "Maths", "Concept": "Number System" }
      ]
    }
  ]
}

能明显看到：

• 最外层的students数组里，每个元素是学生的基础信息（姓名、年级）；
• 每个学生对象还包含一个student子数组，这才是你要渲染的科目、知识点数据。

2. 你的代码存在的问题 #

问题1：错误访问嵌套字段 #

你当前代码里直接从data.students[i]获取SNo/Subject/Concept，但这些字段其实在data.students[i].student这个子数组里，自然拿不到数据。

问题2：未填充学生基础信息 #

HTML里的Student Name: {{ }}和Grade: {{ }}只是占位符，没有被替换成JSON里的实际数据。

问题3：jQuery版本过于老旧 #

你用的是jQuery 1.6.2，这个版本已经非常过时，可能存在兼容性问题，建议升级到稳定的新版本。

3. 修复后的完整代码 #

修复后的HTML（含JS） #

<html>
<head>
  <title>iTop Bird Eye View</title>
  <link href="css/style.css" rel="stylesheet">
  <!-- 升级到较新的jQuery稳定版 -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $.getJSON("students.json").then(function(data) {
        console.log(data);
        
        // 先填充学生基础信息
        if (data.students.length > 0) {
          const studentInfo = data.students[0];
          $('#s_name td:first').text(`Student Name: ${studentInfo.studentname}`);
          $('#s_name td:last').text(`Grade: ${studentInfo.grade}`);
          
          // 遍历嵌套的student数组，渲染表格行
          studentInfo.student.forEach(item => {
            const tr = $('<tr/>');
            tr.append(`<td>${item.SNo}</td>`);
            tr.append(`<td>${item.Subject}</td>`);
            tr.append(`<td>${item.Concept}</td>`);
            $('.table1 tbody').append(tr);
          });
        }
      }).catch(function(error) {
        // 增加错误捕获，方便排查请求失败问题
        console.error('加载JSON失败:', error);
      });
    });
  </script>
</head>
<body>
  <div class="page">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="90%">
      <tr valign="top" align="center">
        <td>
          <table width="95%" id="s_name">
            <tr>
              <td>Student Name:</td>
              <td align="right">Grade:</td>
            </tr>
          </table>
          <hr>
          <table class="data-table table1">
            <thead>
              <tr>
                <th>SNo.</th>
                <th>Subject</th>
                <th>Concept</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

关键修复点说明 #

• 正确访问嵌套数组：通过studentInfo.student.forEach遍历实际的科目数据数组，而不是外层的students数组；
• 填充学生基础信息：直接修改#s_name下的td文本，替换掉原来的占位符；
• 升级jQuery版本：替换为3.7.1版本，更稳定且支持现代浏览器；
• 增加错误捕获：用.catch()捕获JSON加载失败的情况，方便排查文件路径错误、JSON格式错误等问题；
• 使用模板字符串：用`${变量}`的写法让字符串拼接更清晰易读。

4. 额外注意事项 #

• 确保students.json文件和HTML文件在同一目录下，或者路径填写正确，否则getJSON会请求失败；
• 如果直接打开本地HTML文件（file://协议），部分浏览器可能因跨域限制阻止加载本地JSON文件，建议用本地服务器（比如Node.js的http-server、Python的python -m http.server）运行页面。

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