JavaScript获取本地JSON后页面不显示，求改代码统计曝光转化总量

一、本地JSON无法显示数据的排查与解决 #

• 跨域限制问题：直接用file://协议打开HTML文件时，浏览器会阻止fetch访问本地文件。解决办法是启动本地HTTP服务器，比如用VSCode的Live Server插件，或通过Node.js运行npx http-server，再访问http://localhost:8080（对应服务器端口）。
• 文件路径错误：确认./logs.json路径是否正确，JSON文件需和HTML文件放在同一目录，或根据实际层级调整路径（如../logs.json）。
• JSON格式错误：检查logs.json的语法合法性，比如是否存在多余逗号、未闭合引号或格式不规范的内容，语法错误会导致response.json()解析失败。
• DOM元素不存在：确保HTML中存在id="card"的元素（如<div id="card"></div>），否则document.querySelector("#card")会返回null，无法设置内容。

二、修改代码统计并展示曝光/转化总数 #

10万条数据直接渲染DOM会严重拖慢页面性能，因此我们聚焦于统计总数并展示，同时增强错误处理：

<script>
// 初始化统计变量
let totalImpression = 0;
let totalConversion = 0;

fetch('./logs.json')
  .then((response) => {
    // 检查请求是否成功（如404、500等错误）
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    // 遍历数据累加统计值，兼容非数字类型的情况
    data.forEach((values) => {
      totalImpression += Number(values.impression) || 0;
      totalConversion += Number(values.conversion) || 0;
    });

    // 渲染统计结果到页面
    const resultHTML = `
      <div class="summary">
        <h3>数据统计总览</h3>
        <p>总曝光量：<strong>${totalImpression}</strong></p>
        <p>总转化量：<strong>${totalConversion}</strong></p>
      </div>
    `;
    document.querySelector("#card").innerHTML = resultHTML;
  })
  .catch((error) => {
    console.error('处理数据时出错：', error);
    // 在页面显示错误提示，提升用户体验
    document.querySelector("#card").innerHTML = `<p>加载数据失败：${error.message}</p>`;
  });
</script>

额外优化建议 #

• 更简洁的统计方式：可以用reduce方法替代forEach，代码更紧凑：

const { totalImpression, totalConversion } = data.reduce((acc, curr) => {
  acc.totalImpression += Number(curr.impression) || 0;
  acc.totalConversion += Number(curr.conversion) || 0;
  return acc;
}, { totalImpression: 0, totalConversion: 0 });

• 性能保障：放弃渲染10万条DOM卡片，只展示统计结果，彻底避免页面卡顿或崩溃问题。

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