新手求助：HTML表格无法展示JSON数据，出现目录索引错误

我这是第一个项目的首个技术问题，尝试在HTML表格中展示JSON数据但毫无进展，页面只显示目录，还出现目录索引相关错误。不确定是代码问题还是环境设置问题，HTML文档是朋友帮忙搭建的，相关代码如下：

HTML代码 #

<HTML>
<HEAD>
    <TITLE>Foil Checker</TITLE>
    <META http-equiv="X-UA-Compatible" content="IE=edge">
    <META http-equiv='cache-control' content='no-cache'>
    <META http-equiv='expires' content='0'>
    <META http-equiv='pragma' content='no-cache'>
    <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid,i5SPCChart,i5Command"></SCRIPT>
    <link rel="stylesheet" href="stylesheet.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>  
</HEAD>
<BODY>
    <main>
    <table>
        <thead>
            <th>Stack Id</th>
            <th>PO Number</th>
            <th>Material</th>
            <th>Describtion</th>
            <th>PO QTY</th>
            <Th>Stack Qty</Th>
            <th>Extract time</th>
        </thead> 
        <Tbody id="data-output"> 
            
        </Tbody>
    </table>

    </main>
</BODY>
<script type="text/javascript" src="main.js"></script>

</HTML>

JS代码 #

var data = fetch('./Data.json')
.then(function(responce){
    return responce.json();
}).then(function(data){
    let placeholder = document.querySelector("#data-output");
    let out = "";
    for(let product of products){
       out += `
          <tr>
             <td>${product.STACKID}</td>
             <td>${product.PONUMBER}</td>
             <td>${product.MATERIAL}</td>
             <td>${product.DESCRIPTIONTEXT}</td>
             <td>${product.POQTY}</td>
             <td>${product.STACKQTY}</td>
             <td>${product.EXTRACTTIME}</td>
          </tr>
       `;
    }
  
    placeholder.innerHTML = out;
 });

代码层面问题修复 #

1. 变量拼写错误：responce应为response，虽然部分浏览器能容错，但规范写法可避免潜在异常。
2. 循环变量未定义：循环中使用的products未声明，需替换为data（即JSON返回的数据集）。如果你的JSON结构是包含数组的对象（如{ "products": [...] }），则改为data.products。
3. 缺失错误处理：fetch请求未捕获异常，当JSON文件不存在、路径错误或请求失败时无法定位问题，需添加.catch()块。

修正后的JS代码：

fetch('./Data.json')
.then(function(response){
    if (!response.ok) {
        throw new Error('请求失败：' + response.status);
    }
    return response.json();
}).then(function(data){
    let placeholder = document.querySelector("#data-output");
    let out = "";
    // 若JSON是数组则直接遍历data，若为嵌套对象则调整为对应字段
    for(let product of data){
       out += `
          <tr>
             <td>${product.STACKID}</td>
             <td>${product.PONUMBER}</td>
             <td>${product.MATERIAL}</td>
             <td>${product.DESCRIPTIONTEXT}</td>
             <td>${product.POQTY}</td>
             <td>${product.STACKQTY}</td>
             <td>${product.EXTRACTTIME}</td>
          </tr>
       `;
    }
  
    placeholder.innerHTML = out;
}).catch(function(error){
    console.error('加载数据出错：', error);
});

环境配置问题修复 #

1. 目录索引错误：页面显示目录说明服务器未设置默认索引页（如index.html），需确认服务器配置，将你的HTML文件设为默认首页，或直接访问完整文件名（如http://你的域名/你的页面.html）。
2. 文件路径验证：检查Data.json、main.js、stylesheet.css的路径是否正确，确保它们与HTML文件在同一目录，或路径书写无误。
3. 本地运行环境：若直接打开本地HTML文件（file://协议），fetch会因跨域限制无法加载本地JSON，需使用本地服务器运行项目，比如：
   • Node.js：安装http-server后，在项目目录执行http-server
   • Python：执行python -m http.server（Python3）或python -m SimpleHTTPServer（Python2）

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