当我的 JSON 代码没有错误时，为什么 JavaScript 引擎会返回语法错误？ [复制]答案

【问题标题】：Why did the JavaScript engine return a syntax error when there is no error in my JSON code? [duplicate]当我的 JSON 代码没有错误时，为什么 JavaScript 引擎会返回语法错误？ [复制]
【发布时间】：2021-10-28 06:49:23
【问题描述】：

我正在创建一个应用程序，它将在网页上列出所有姓名、年龄、性别。服务器返回的数据为 JSON 格式。一切看起来都很好，但是当单击“显示家庭信息”按钮时，它给了我这个错误：

SyntaxError: Unexpected token o in JSON at position 1

收到该错误后，我转到我的 JSON 文件并检查是否有任何错误，但我没有找到。第一个位置没有“o”。

所以我不确定错误来自哪里。

这是我的 HTML 代码：

<!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>
        let arrayForData = [];

        function showFamilyInfo(){
            fetch('users.json')
            .then(function(response){
                response.json()
                .then(function(data){
                    let parseData = JSON.parse(data);
                    parseData.forEach(function(element){
                        for(let i of parseData[element]){
                            arrayForData.push(`'
                            <p>
                                ${i}: ${i.FirstName}
                                ${i}: ${i.LastName}
                                ${i}: ${i.Age}
                                ${i}: ${i.Gender}
                            </p>
                            '`);
                        }
                    });
                    document.getElementById('demo').innerHTML = arrayForData.join();
                })
                .catch(function(error){
                    document.getElementById('demo').innerHTML = error;
                });
            });
        }
    </script>
</body>

</html>

这是我的 JSON 代码：

[
    {
    "FirstName":"Toby",
"LastName":"Harnish",
"Age":17,
"Gender":"Male"
},
{
    "FirstName":"Kelly",
"LastName":"Harnish",
"Age":51,
"Gender":"Female"
},
{
    "FirstName":"Dale",
    "LastName":"Harnish",
    "Age":57,
    "Gender":"Male"
},
{
    "FirstName":"Avery",
    "LastName":"Harnish",
    "Age":23,
    "Gender":"Male"
},
{
    "FirstName":"Annie",
    "LastName":"Harnish",
    "Age":16,
    "Gender":"Female"
},
{
    "FirstName":"Benjimin",
    "LastName":"Harnish",
    "Age":16,
    "Gender":"Male"
},
{
    "FirstName":"Wesley",
    "LastName":"Harnish",
    "Age":16,
    "Gender":"Male"
},
{
    "FirstName":"Clara",
    "LastName":"Harnish",
    "Age":14,
    "Gender":"Female"
},
{
    "FirstName":"Bobby",
    "LastName":"Harnish",
    "Age":15,
    "Gender":"Male"
    },
    {
        "FirstName":"Olivia",
        "LastName":"Harnish",
        "Age":20,
        "Gender":"Female"
    },
{
    "FirstName":"Timmy",
    "LastName":"Harnish",
    "Age":19,
    "Gender":"Male"
}
]

【问题讨论】：

JSON.parse() 期望一个 JSON 字符串作为参数来将其解析为 JavaScript 对象/数组，但是在这里你已经有了从 response.json() 生成的数组，你不需要需要解析，可以直接使用。
response.json() 已经为您解析了数据，let parseData = JSON.parse(data); parseData.forEach( 应该是一个简单的data.forEach(。消息中提到的特定字母o 是因为data 已经是一个JavaScript 对象数组，所以它被字符串化为[object Object],[object Object]...，JSON.parse() 开始作为数组处理[，但随后发现了一个意外信。
@Zac，如果这是真的，它不应该返回 TypeError: parseData[element] is not iterable。它应该返回解析的 JSON。由于 JS 对象是 iderable。
JS 对象不可迭代，您可以将其自定义为可迭代，但默认情况下它不是，但是，从我在您的代码中看到的，您不需要遍历对象键，您已经在.forEach(function(element){ 中的返回数组中循环对象，这里您在每次迭代中都有element 中的每个对象，您可以直接使用它来访问其键（即 element.FirstName），不需要内部 for -of for(let i of parseData[element]){ 循环
我会鼓励您提高调试和跟踪技能，以便您可以更多地了解代码及其实际行为。您可以开始使用console.log 来检查每个步骤的值，我也建议您阅读更多（例如 MDN 是一个很好的参考）关于 JS 中您认为它没有按预期工作的任何部分以了解更多

标签： javascript

【解决方案1】：

response.json 不会返回字符串。相反，它返回一个对象，因此您无需解析它。照原样使用它。

【讨论】：

这不是真的。 response.json() 返回一个 Promise。
@Toby 仍然是对已解析对象的承诺，而不是对字符串的承诺。（并且吹毛求疵，promise 是一个对象：P）