遍历 JSON 数组并在 HTML 表中显示结果答案

【问题标题】：Iterate through JSON Array and show result in a HTML table遍历 JSON 数组并在 HTML 表中显示结果
【发布时间】：2018-11-12 13:57:20
【问题描述】：

我尝试遍历一个数组并在 HTML 表格中显示结果。数据来自网络服务。

我的 JavaScript 函数：

function loadDate() {

        var PanelID = document.getElementById('PanelID').value;
        alert(PanelID);

        $.ajax({
            type: "POST",
            url: "../../WebService/QRCode.asmx/getDatetime",
            data: "{ 'PanelID': '" + PanelID + "' }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            cache: true,
            success: function(data) {

                var table = document.createElement('table');
                var str = '<table>';
                str += '<tr><th>Von</th><th>Bis</th><th>Thema</th></tr>';

                for(var i = 0; i < data.d.length; i++) {

                    str += '<tr><td>' + data.d[i].Von + '</td><td>' + data.d[i].Bis + '</td><td>' + data.d[i].Thema + '</td></tr>';

                }
                str += '</table>';
                return str;


                var existingDiv = document.getElementById('DataTable');
                existingDiv.innerHTML = loadDate(data);

            },
            error: function(x, e) {
                alert("The call to the server side failed. " + x.responseText);
            }
        });
    }

HTML 部分

 <body>
    <h1>
        Check-In und Check-Out von Besprechungen</h1>

    <form id="form1" runat="server">
  <div id = "DataTable"> </div>
    <p>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        Raumname: 
        <br />
        <asp:TextBox type="text" name="Panels" ID="PanelID" value="" runat="server"></asp:TextBox>
        <br />
        <br />
        <asp:TextBox type="text" ID="Table" mode="multiline" runat="server" Coloumns="100" Rows="200"
            Height="230px" Width="405px"></asp:TextBox>


        <br />
        <br />
        <asp:Button ID="button" runat="server" Text="Check-In" Width="99px" OnClientClick="return loadDate();" />
        <asp:Button ID="button1" runat="server" Text="Check_Out" Width="99px" />
    </p>
    </form> 
</body>

问题是我的代码中有些东西不起作用。如果我使用上面的代码执行此操作，我将无法显示这些值。

我认为它与 for 子句有关，因为

例如，我更改 FOR 子句：

 for(var i = 0; i < data.d.length; i++) {
                    var VonDatum = data.d[i].Von;
                    $("#Table").val(VonDatum);  
}

所以我可以在文本框中显示 Von 值。但是如果我这样做，FOR 子句只显示一个值，但数组中有超过 30 个值。

我的 JSON 数据看起来像：

{"d":[{"Von":"18.05.2012 00:00:00","Bis":"18.06.2012 00:00:00","Thema":"Raum ist gesperrt","PanelIDs":"FAT-1"}]}

【问题讨论】：

json数据长什么样子？

标签： c# javascript html jquery

【解决方案1】：

旧

return str;

var existingDiv = document.getElementById('DataTable');
existingDiv.innerHTML = loadDate(data);

新

var existingDiv = document.getElementById('DataTable');
existingDiv.innerHTML = loadDate(data);

return str;

但是你的str 没有设置在任何元素中，所以你想设置元素？像这样

var existingDiv = document.getElementById('DataTable');
    existingDiv.innerHTML = str;

【讨论】：

嘿，谢谢，到目前为止工作。他用数据加载表格，但 2 秒后表格消失。那个奇怪的
也许你知道什么会导致表格在 2 秒后消失？

【解决方案2】：

为什么会有

return str;

你要把它退回到哪里？你的代码应该是

existingDiv.innerHTML = loadDate(str);

【讨论】：