从JSON文件提取医护人员单条数据失败，含JSON解析报错求助

嘿，我来帮你一步步搞定这两个问题！先从最棘手的JSON解析报错开始，再教你正确提取字段的方法。

一、先解决JSON.parse的语法错误 #

你遇到的JSON.parse: expected ',' or '}' after property value in object at line 18错误，说明你的staff_data.json第18行存在不符合JSON规范的语法问题。JSON对格式要求非常严格，常见的坑点有这些：

• 属性名没有用双引号包裹（比如写了name: "张三"而不是"name": "张三"）
• 字符串没有闭合双引号（比如"name": "张三少了结尾的引号）
• 数组/对象的最后一个元素后面多了逗号（比如{"name": "张三", "age": 30,}最后一个逗号是多余的）
• 用了单引号而不是双引号（JSON只认双引号）

你可以直接打开staff_data.json文件，定位到第18行，对照上面的点检查修正。举个反例和正确示例：

错误写法（属性名无引号+末尾多逗号）：

{
  doctors: [
    {name: "李医生", "Section": "内科", "Grade": "主任医师",},
  ]
}

正确写法：

{
  "doctors": [
    {"name": "李医生", "Section": "内科", "Grade": "主任医师"}
  ],
  "nurses": [
    {"name": "王护士", "Section": "外科", "Grade": "护师"}
  ]
}

二、正确提取医生/护士的字段 #

当JSON格式修正后，咱们可以调整loadStaffData函数，确保能正确解析并提取字段。这里给你一个完整的示例写法：

<script>
function loadStaffData() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'staff_data.json', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      try {
        // 解析JSON数据
        const staffData = JSON.parse(xhr.responseText);
        
        // 提取并处理医生数据
        staffData.doctors.forEach(doctor => {
          console.log(`医生姓名：${doctor.name}，科室：${doctor.Section}，职称：${doctor.Grade}`);
          // 这里可以把数据插入到HTML页面，比如创建DOM元素
        });

        // 提取并处理护士数据
        staffData.nurses.forEach(nurse => {
          console.log(`护士姓名：${nurse.name}，科室：${nurse.Section}，职称：${nurse.Grade}`);
        });
      } catch (error) {
        console.error('JSON解析失败：', error);
      }
    } else {
      console.error('请求失败，状态码：', xhr.status);
    }
  };
  xhr.onerror = function() {
    console.error('请求发生错误');
  };
  xhr.send();
}

// 调用函数加载数据
loadStaffData();
</script>

关键点：

• 用try-catch包裹JSON.parse，方便捕获残留的语法错误
• 解析后直接通过staffData.doctors和staffData.nurses访问数组，再用forEach遍历每个对象，提取对应的name、Section、Grade字段

三、本地文件访问的小提示 #

用Firefox访问本地file://协议的文件时，偶尔会有一些权限限制。如果修正JSON后还是有奇怪的问题，建议用本地临时服务器来运行：

• 如果你有Python，打开终端到文件所在目录，运行python -m http.server 8000（Python3）或python -m SimpleHTTPServer 8000（Python2）
• 然后在浏览器访问http://localhost:8000，这样就可以避免本地文件的跨域或权限问题

内容的提问来源于stack exchange，提问作者Alpha Bravo Charlie ...