如何不修改原始JSON文件 直接在HTML页面中读取使用其数据

完全不需要修改原始JSON文件，也无需额外生成新的拼接后文件，所有格式转换逻辑都可以在HTML页面的脚本中完成，具体实现方式如下：

实现代码（原生JS，无需引入任何第三方库） #

直接请求原始JSON文件，拿到响应后手动包装成你需要的格式即可：

<!-- 把这段脚本放到你的HTML页面body结束标签前即可 -->
<script>
fetch('替换成你的原始JSON文件的实际路径，比如./data.json')
  .then(res => res.json())
  .then(originData => {
    // 这里按照你的要求包装格式，得到你需要的data变量
    const data = [originData]
    // 下方写你原来的填充网页的逻辑，直接用data变量即可
    // 示例：打印验证格式
    console.log(data)
  })
  .catch(err => {
    console.error('JSON加载失败，请检查文件路径是否正确：', err)
  })
</script>

注意：不要直接用<script src="xxx.json">的方式引入原始JSON文件，JSON本身不符合JS语法规范，会直接抛出脚本错误。

旧浏览器兼容方案（如果需要支持IE等不支持fetch的浏览器） #

可以用XMLHttpRequest实现相同逻辑：

var xhr = new XMLHttpRequest()
xhr.open('GET', '替换成你的原始JSON文件路径', true)
xhr.onload = function () {
  if (xhr.status === 200) {
    var originData = JSON.parse(xhr.responseText)
    var data = [originData]
    // 后续业务逻辑写在这里
  }
}
xhr.onerror = function () {
  console.error('JSON加载失败')
}
xhr.send()

原理说明 #

• 原始JSON文件本身是标准的JSON格式，符合HTTP请求读取的要求，不需要做任何修改
• 所有的变量声明、外层方括号包装逻辑都在前端内存中执行，不会对原始文件产生任何改动
• 相比生成新文件的方案，省去了文件同步、更新维护的额外成本

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