使用XMLHttpRequest调用API获取JSON后渲染表格td输出undefined如何解决

问题根因 #

• 你将接口返回的json.data数组用Object.assign转成了普通对象，遍历的时候for...in拿到的r是数组索引的字符串值（比如"0"、"1"），不是用户对象本身，所以读取r.id等属性自然返回undefined
• onreadystatechange事件没有判断请求完成状态，可能会提前解析空的响应内容，导致报错
• 事件回调加了async标识但没有用到await语法，属于多余配置可以删除

修复后代码 #

<script>
    var request = new XMLHttpRequest();
    request.open("GET","https://dummyapi.io/data/v1/user")
    request.setRequestHeader("app-id","6176d770ceedfe1a52297285");
    request.onreadystatechange = function () {
        // 先判断请求完成且状态码正常再处理响应
        if (request.readyState === 4 && request.status === 200) {
            var json = JSON.parse(request.responseText);
            // 直接传递数组即可，无需转成普通对象
            show(json.data);
        }
    }
    request.send();

    function show(data) {
        let tab =
            `<tr>
          <th>Id</th>
          <th>Title</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Picture</th>
         </tr>`;
        // 用for...of遍历数组直接拿到用户对象
        for (var r of data) {
            tab += `<tr>
            <td>${r.id} </td>
            <td>${r.title}</td>
            <td>${r.firstName}</td>
            <td>${r.lastName}</td>
            <td><img src="${r.picture}" alt="用户头像" width="50"></td>
        </tr>`;
        }
        document.getElementById("employees").innerHTML = tab;
    }
</script>

<h1>Registered Employees</h1>
<table id="employees"></table>
</body>

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