Iterate through JSON Array and show result in a HTML table

Question

I try to iterate through an array and show the results in a HTML table. The Data is coming from a webservice.

My JavaScript function:

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 Part

 <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>

The Problem is that something is not working in my code. If I do it with the above code I can't display the values.

I think it has something to do wit the for clause, because

f i change the FOR clause for example:

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

so I can display the Von value in a textbox. But if I do it like that the FOR clause is displaying only one value, but there are more than 30 values in the array.

My JSON-Data looks like:

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

What does the json data look like?

Justin Harvey
– Justin Harvey

2012-09-24 08:39:56 +00:00
Commented Sep 24, 2012 at 8:39 — Justin Harvey
– Justin Harvey, Commented Sep 24, 2012 at 8:39

Sender · Accepted Answer · 2012-09-24 08:46:49Z

1

OLD

return str;

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

NEW

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

return str;

but your str not set in any element so you want to set element ? like this way

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

answered Sep 24, 2012 at 8:46

Sender

6,90812 gold badges49 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paks Over a year ago

hey thanks that is working so far. He loads the table with the Data, but after 2 sec the Table dissappears. That strange

Paks Over a year ago

Maybe you know what can cause that the table disappars after 2 sec?

Neil Kennedy · Accepted Answer · 2012-09-24 08:42:11Z

0

Why do you have

return str;

Where are you returning it to? Should your code be

existingDiv.innerHTML = loadDate(str);

answered Sep 24, 2012 at 8:42

Neil Kennedy

6031 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

Iterate through JSON Array and show result in a HTML table

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related