REST API 调用未使用数组内容填充表答案

【问题标题】：REST API call not populating table with array contentsREST API 调用未使用数组内容填充表
【发布时间】：2019-12-11 10:52:28
【问题描述】：

我有一个查询，当用户访问某个页面时会触发该查询，该页面会返回轮班联系人以进行升级。我遇到的问题是我为这些 POC 指定的表中没有填充任何内容。我在下面添加了我的代码，包括应该填充到的 HTML 元素，但是我没有在控制台中返回任何错误，并且我知道在运行 Ajax 查询时应该填充到其中的数据和查看 XML 结果，我可以看到应该显示的条目。我在同一页面上有另一个电话联系另一个列表以检索正在进行的严重事件，并且一个工作没有任何问题，所以我说服自己这是导致问题的 .innerHTML 部分，作为最初的 @987654322 @ 命令正在清除占位符文本，但没有完成任何其他操作。


    var filManager = [];
    var mancontact = document.getElementById("managercontact");

    function getContacts() {
        $.ajax({
            url: ".../_api/web/lists/getbytitle('On Shift Contacts')/items?$filter=Status eq 'In'&$select=Title,Id,Role,Status,Number,Brand",
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose"
            },
            success: function(data) {
                filManager = data.d.results;
                filManager = filManager.filter(function(item) {
                    return item.Role == "Incident Manager";
                });
                if (filManager === undefined || filManager == 0) {
                    mancontact.innerHTML = "<tr><td style='font-family:Calibri'><center>There are currently no on-shift Managers</center></td></tr>";
                } else {
                    mancontact.innerHTML = "";
                    mancontact += "<tr style='font-family:Calibri;font-size:14pt;text-align:center'><td colspan='3'>Manager On-Shift</td></tr><tr style='font-family:Calibri;font-size:12pt;text-align:center'><td>Name</td><td>Contact Number</td><td>Location</td></tr>";
                    for (var obj in filManager) {
                        mancontact.innerHTML += "<tr style='font-family:Calibri;font-size:12pt;text-align:center'><td>" + filManager[obj].Title + "</td><td>" + filManager[obj].Number + "</td><td>" + filManager[obj].Brand + "</td></tr>";
                    }
                }
            }
        });
    }

<center>
  <table id="managercontact">
    <tr>
      <td>Placeholder</td>
    </tr>
  </table>
</center>

调用的示例数组输出：

filManager = [
{ID:"1", Title: "Person1", Status: "In", Role: "Incident Controller", Brand: "Consumer", Number: "01234 567 890"},
{ID:"2", Title: "Person2", Status: "In", Role: "Incident Manager", Brand: "Consumer", Number: "01234 567 890"},
{ID:"3", Title: "Person3", Status: "Off", Role: "Incident Manager", Brand: "Business", Number: "01234 567 890"},
{ID:"4", Title: "Person4", Status: "Off", Role: "Incident Controller", Brand: "Business", Number: "01234 567 890"},];

【问题讨论】：

考虑提供服务器返回的 json。我们无法对您的 ajax 调用做任何事情。顺便说一句，如果没有错误，过滤器将返回一个数组（可能为空），因此测试 undefined 是无用的，并且测试 0 以及因为数组不是 0。（您应该单独测试 filManager.length === 0）
我添加了一个 ajax 调用返回的数据示例，但是我相信我已经解决了这个问题，因为 else 部分中缺少 .innerHTML。
示例输出似乎错误，文本值周围缺少引号。

标签： javascript html json ajax

【解决方案1】：

我设法在 if 语句中找到了一个缺失的 innerHTML。添加下面的代码而不是上面的 if 语句已经为我解决了这个问题。

            mancontact.innerHTML = "<tr><td style='font-family:Calibri'><center>There are currently no on-shift Managers</center></td></tr>";
            } else {
            mancontact.innerHTML = "";
            mancontact.innerHTML += "<tr style='font-family:Calibri;font-size:14pt;text-align:center'><td colspan='3'>Manager On-Shift</td></tr><tr style='font-family:Calibri;font-size:12pt;text-align:center'><td>Name</td><td>Contact Number</td><td>Location</td></tr>";
            for(var obj in filManager){
                mancontact.innerHTML += "<tr style='font-family:Calibri;font-size:12pt;text-align:center'><td>" + filManager[obj].Title + "</td><td>" + filManager[obj].Number + "</td><td>" + filManager[obj].Brand + "</td></tr>";
            }```

【讨论】：