如何使用JavaScript解析JSON文件以访问其中数据？

我来帮你补全代码并说明怎么正确解析和访问这个JSON里的数据～

首先先明确你的JSON结构（整理后更清晰）：

{
  "Veg": {
    "French beans 300g": 81969,
    "Bunched beetroot": 78272,
    "Squash box": 45450,
    "Bunched carrots 500g": 90435,
    "Courgettes x3": 17824,
    "Fennel x1": 14816,
    "Shiitake mushrooms 150g": 5166,
    "Spring onions 125g": 65034,
    "Red peppers x2": 11671
  }
}

你的fetch代码没写完，这里给你补全并添加数据访问的示例：

<script>
let sourceData; // 用let替代var，符合现代JS规范

// 完整的JSON加载与解析逻辑
fetch("data.json", {
  method: "GET",
  headers: new Headers({
    "Content-Type": "application/json" // 指定请求的内容类型
  })
})
// 第一步：处理响应状态
.then(response => {
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json(); // 将响应转为JavaScript对象
})
// 第二步：处理解析后的数据
.then(data => {
  sourceData = data;
  console.log("成功加载数据:", sourceData);

  // 👉 访问单个蔬菜的ID（注意键名有空格，必须用方括号语法）
  console.log("French beans 300g的ID:", sourceData.Veg["French beans 300g"]);

  // 👉 遍历所有蔬菜，打印名称和对应ID
  console.log("=== 所有蔬菜列表 ===");
  for (const [vegName, vegId] of Object.entries(sourceData.Veg)) {
    console.log(`${vegName}: ${vegId}`);
  }
})
// 捕获加载或解析过程中的错误
.catch(error => {
  console.error("加载JSON时出错:", error);
});
</script>

关键注意点： #

• 键名含空格的访问方式：因为你的蔬菜名称（比如French beans 300g）包含空格，不能用sourceData.Veg.French beans 300g这种点语法，必须用方括号sourceData.Veg["French beans 300g"]来访问。
• Promise处理：fetch返回的是Promise对象，必须通过.then()链式调用处理异步结果，同时别忘了用.catch()捕获可能的错误（比如文件不存在、网络问题、JSON格式错误等）。
• 响应状态检查：一定要先判断response.ok，避免在请求失败（比如404）时继续解析无效的响应内容。

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