将 JSON 读取到 HTML 表中答案

【问题标题】：Read JSON and into HTML Table将 JSON 读取到 HTML 表中
【发布时间】：2018-11-07 14:00:56
【问题描述】：

在以下代码中，我尝试在 HTML 表格中显示源代码。问题在于，我看到的不是字符串“未定义”。提前致谢！

    <!DOCTYPE html>
<html>
<body>

<h2>Table:</h2>

<p id="demo"></p>

<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
            txt += "<tr><td>" + myObj[x].name + "</td></tr>";
        }
        txt += "</table>"        
        document.getElementById("demo").innerHTML = txt;
    }
};
xmlhttp.open("POST", "https://www.bayern-fahrplan.de/DDIP01?CoordSystem=WGS84&MinX=11%2C012742519378662&MinY=49%2C465725517007506&MaxX=11%2C035208702087402&MaxY=49%2C47637864525285&ts=154159795103", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);

</script>

</body>
</html>

【问题讨论】：

这大概是因为从服务器返回的内容不是您在尝试在代码中读取时假设的格式。但是您没有向我们展示该数据的样本，因此我们无法确切告诉您如何修复它。我们只能说“检查返回的结构并相应地修改您的代码以正确读取它”。如果您仍然遇到问题，请编辑问题以向我们展示来自服务器的响应示例。

标签： javascript html json ajax request

【解决方案1】：

我测试了您的代码，并查看了响应中返回的 JSON。返回对象的示例如下：

    {"CurrentStop":"KURGAR:1",
    "DayOfOperation":"07.11.2018",
    "Delay":227,
    "DirectionText":"Stadtgrenze",
    "ID":"35094510",
    "JourneyIdentifier":"2009441",
    "Latitude":"49,466061",
    "LatitudeBefore":"49,467044",
    "LineText":"38",
    "Longitude":"11,012931",
    "LongitudeBefore":"11,013168",
    "MOTCode":5,
    "ModCode":5,
    "NextStop":"STAD:6",
    "Operator":"VAG",
    "ProductIdentifier":"BUS",
    "RealtimeAvailable":1,
    "Timestamp":"2018-11-07T15:13:44+01:00",
    "TimestampPrevious":"2018-11-07T15:12:40+01:00",
    "VehicleIdentifier":"589",
    "X":"11,012931",
    "XPrevious":"11,013168",
    "Y":"49,466061",
    "YPrevious":"49,467044"}

在代码中的 for 循环中，您试图获取 myObj[x] 的 name 属性，如下所示：

for (x in myObj) {
    txt += "<tr><td>" + myObj[x].name + "</td></tr>";
}

但是，正如您在上面的 JSON 中看到的，没有 name 属性，这就是您得到 undefined 的原因。

如果您将上述“for 循环”代码中的name 替换为正确的属性名称，那么您的代码将起作用。例如：

for (x in myObj) {
    txt += "<tr><td>" + myObj[x].CurrentStop + "</td></tr>";
}

我已经对此进行了测试，并且可以正常工作。希望这会有所帮助。

【讨论】：

@PeterStadler 没问题 :) 如果它是您正在寻找的答案，请随意将其标记为答案。很高兴有帮助:)