如何在独立JS文件中读取本地JSON为可直接调用的对象

当前代码和JSON结构存在两个会导致运行报错的硬错误，直接修正即可：

• 现有jsonFile.json的内容不符合JSON语法规范，无法被正常解析
• 取值逻辑完全颠倒了数据层级，也不能直接把JSON文件名当作可用的JS变量调用

1. 调整合法的JSON文件内容 #

你原先编写的文件内容

{ ["name": "Bobby"], ["name": "Jeoff"] }

存在语法问题：大括号作为JSON对象的外层包裹，必须搭配明确的键名，不能直接放入无键的数组项，解析时会直接抛出语法错误。
如果需求是按索引获取每个条目下的name属性，jsonFile.json的正确结构为：

[
  { "name": "Bobby" },
  { "name": "Jeoff" }
]

2. 修正取值的逻辑错误 #

你原先编写的取值代码

var firstName = (jsonFile.json).name[0];

存在两个逻辑问题：

• 不能直接把本地JSON文件名当作运行时代码里的变量，必须先通过JS的文件读取能力加载文件文本内容，再用JSON.parse解析成可操作的JS数组/对象，才能访问内部属性
• 层级关系完全搞反：带数字索引的是数组结构，每个数组项下的对象才拥有name属性；你写的.name[0]逻辑对应的是“读取jsonFile对象的name属性数组的第0项”，和你的实际数据结构不匹配

不同运行环境的正确实现 #

Node.js 独立JS文件

const fs = require('fs');
// 读取并解析JSON文件内容
const userList = JSON.parse(fs.readFileSync('./jsonFile.json', 'utf8'));
// 获取第0个索引条目下的name值
const firstName = userList[0].name; // 输出结果为 "Bobby"

浏览器端独立JS文件

需要将JSON文件放置在与页面同源的静态服务路径下，通过fetch拉取解析：

fetch('./jsonFile.json')
  .then(res => res.json())
  .then(userList => {
    // 获取第0个索引条目下的name值
    const firstName = userList[0].name; // 输出结果为 "Bobby"
  })

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