JSON代码无语法错误，为何JavaScript引擎报Unexpected token o错误

SyntaxError: Unexpected token o in JSON at position 1 是重复解析JSON导致的：

• 调用response.json()时，浏览器已经自动将返回的JSON字符串解析为了JavaScript数组/对象，你拿到的data已经是可用的数组，不是原始JSON字符串
• 你对已经是对象类型的data执行JSON.parse(data)时，JSON.parse会先将入参转为字符串，数组转字符串的默认结果是[object Array]，第二个字符就是o，刚好对应报错提示的位置1的非法字符o。你检查JSON文件没问题就是因为错误根本不是出在JSON文件本身，是代码逻辑错了。

你需要删除多余的JSON解析步骤，同时修正错误的遍历逻辑：

1. 删掉let parseData = JSON.parse(data);这一行，直接用response.json()返回的data遍历
2. 你的JSON内容本身就是人员数组，不需要嵌套两层循环，直接遍历每一项取对应字段即可

修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fetch API</title>
</head>
<body>
    <p id="demo"></p>
    <button onclick="showFamilyInfo()">Show Family Info</button>

    <script>
        function showFamilyInfo(){
            const arrayForData = [];
            fetch('users.json')
            .then(response => {
                if (!response.ok) throw new Error('请求失败');
                return response.json();
            })
            .then(data => {
                data.forEach(user => {
                    arrayForData.push(`
                    <p>
                        姓名：${user.FirstName} ${user.LastName}
                        年龄：${user.Age}
                        性别：${user.Gender}
                    </p>
                    `);
                });
                document.getElementById('demo').innerHTML = arrayForData.join('');
            })
            .catch(error => {
                document.getElementById('demo').innerHTML = `错误：${error.message}`;
            });
        }
    </script>
</body>
</html>

• 把arrayForData放到函数内部，避免重复点击按钮时内容重复追加
• 增加了请求成功状态判断，避免接口报错时逻辑异常
• 简化了遍历逻辑，删除了冗余的嵌套循环

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