Json reading data from json call in to a table

Question

I have a script that reads the content of a Json string and creates a table to display the data. This works fine as long as I include the Json string in the JQuery function. What I need to do is call another php file which returns the Json string.

I have written the script that returns the Json string:

[{"ClientName":"Name","RoomName":"Room 2","RoomFromTime":"06:00:00","RoomToTime":"17:00:00"},{"ClientName":"Name","RoomName":"Room 6","RoomFromTime":"06:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 1","RoomFromTime":"07:00:00","RoomToTime":"17:00:00"},{"ClientName":"Name","RoomName":"Room 14","RoomFromTime":"07:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 12","RoomFromTime":"07:00:00","RoomToTime":"19:00:00"},{"ClientName":"Name","RoomName":"Room 10","RoomFromTime":"07:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 9","RoomFromTime":"07:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 8","RoomFromTime":"07:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 7","RoomFromTime":"07:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 5","RoomFromTime":"07:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 3","RoomFromTime":"07:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 4","RoomFromTime":"08:00:00","RoomToTime":"23:00:00"},{"ClientName":"Name","RoomName":"Room 15","RoomFromTime":"08:00:00","RoomToTime":"19:00:00"}]

My JQuery function has the following:

$(document).ready(function () {

var json = $.getJSON("get_data.php", function(data){

var tr ;
for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td><div class='clientname-text'>" + json[i].ClientName + "</div></td>");
    tr.append("<td><div class='roomname-text'>" + json[i].RoomName + "</div></td>");
    tr.append("<td><div class='time-text'>" + json[i].RoomFromTime + " - " + json[i].RoomToTime + "</div></td>");

    $('table').append(tr);
}
});
});

Using the call to the other php script does not display the returned data in the table. Now I know I have gone wrong somewhere, but can anyoe see what I am doing incorrectly.

Many thanks in advance for your time.

UPDATE:

Adder · Accepted Answer · 2017-07-31 11:15:31Z

1

Because getJSON by default works asynchronously, the json variable is not filled at the time the callback is run. Change the callback to:

$.getJSON("get_data.php", function(json){
...

It appears there is a wrapper around your actual jason. Either fix it like this:

$.getJSON("get_data.php", function(json){
json = json[0].data;
...

or fix it in get_data.php.

edited Jul 31, 2017 at 11:15

answered Jul 31, 2017 at 10:56

Adder

5,8982 gold badges35 silver badges60 bronze badges

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

6 Comments

DCJones Over a year ago

well that did someting. Now my table rows display the word "Undefinded", any ideas as to why?

Adder Over a year ago

Do a console.dir(json); to find out what is in the json, please.

Zeljka Over a year ago

i think you shoud remove [i] for example from json[i].ClientName, and write json.ClientName

DCJones Over a year ago

@CKG many thanks for your reply. If I copy your code into my script it runs but I still get "undefinded" in the table row.

Adder Over a year ago

Updated the answer with a fix and problem description.

|

Chandra Kumar · Accepted Answer · 2017-07-31 11:05:14Z

You can use this 100% working code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
        $.getJSON("get_data.php", function(data){
            $.each(data, function(i, field){
                var tr ;
                tr = $('<tr/>');
                tr.append("<td><div class='clientname-text'>" + field.ClientName + "</div></td>");
                tr.append("<td><div class='roomname-text'>" + field.RoomName + "</div></td>");
                tr.append("<td><div class='time-text'>" + field.RoomFromTime + " - " + field.RoomToTime + "</div></td>");
                $('table').append(tr);
            });
        });
    });
  </script>
</head>
<body>
<table></table>
</body>
</html>

Collectives™ on Stack Overflow

Json reading data from json call in to a table

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related