在 JSON 调用中获取 UNDEFINED

Getting an UNDEFINED on a JSON call

在 [ajax/json 教程] 中,我只有一个错误。我一直按照教程进行操作,但是在输出“名称”的对象值的地方,我的输出一直得到 'undefined'。我让它输出“Rick”的唯一方法是使用 console.log(user[0].name) 而不是教程中的“console.log(user.name)”。按照说明,var 用户是 JSON.parse。

JSON 文件 (user.json):

[
    {
        "id": 1,
        "name": "Rick",
        "email": "rick@mail.com"
    }
]

HTML 文件 (ajax2.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ajax 2 - Local JSON</title>
    <style>
        *, html { background: #333; color: #eee; }
    </style>
</head>
<body>
    <button id="button1">Get User</button>
    <button id="button2">Get Users</button>
    <br /><br />
    <h1><div id="user"></div></h1>
    <br />
    <h2><div id="users"></div></h2>

    <script>
        function loadUser() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'user.json', true);

            xhr.onload = function() {
                if(this.status == 200) {
                    var user = JSON.parse(this.responseText);
                    console.log(user.name); // Output name "Rick"
                }
            }

            xhr.send();
        }

        document.getElementById('button1').addEventListener('click', loadUser);


    </script>

</body>
</html>

我一直收到未定义的信息。但是编码:

if(this.status == 200) {
    console.log(this.responseText); // Output the object key/values
}

会正确输出对象。

关于为什么我会得到未定义的任何想法?我正在使用 XAMPP,我的 Chrome 浏览器也是最新的。

如果我需要添加任何信息,请告诉我。我已经搜索了可能的答案,但它只是把我带进了一个兔子洞。

您应该从 user.json 文件中删除括号。

{
    "id": 1,
    "name": "Rick",
    "email": "rick@mail.com"
}