Trying to Parse Json to a HTML Table

Question

Well, I've been at this for 3 days now and I haven't figured this out yet.

I'm trying to grab the json from this API and trying to parse it to a HTML table, but I'm having trouble. Could anyone help/point me in the right direction?

This is the API I'm trying to grab here

http://census.daybreakgames.com/json/status?game=h1z1

Here's the Code i've tried to do.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>
    $(function() {
       var entries = [];
       var dmJSON = "http://census.daybreakgames.com/json/status?game=h1z1";
       $.getJSON( dmJSON, function(data) {
       $.each(data.entries, function(i, f) {
       var tblRow = "<tr>" + "<td>" + f + "</td>" + "<td>" + f.region_code + "</td>" + "<td>" + f.title + "</td>" + "<td> " + f.status + "</td>" +  "<td>" + f.age + "</td>" + "</tr>"
   $(tblRow).appendTo("#entrydata tbody");
   });
  });
});
</script>

</head>
<body>

<div class="wrapper">
<div class="profile">
<table id= "entrydata" border="1">
 <thead>
    <th>Name</th>
    <th>Region Code</th>
    <th>Game</th>
<th>Server Stauts</th>
    <th>Time</th>
</thead>
  <tbody>

 </tbody>
</table>

</div>
</div>

</body>

</html>

How are you parsing it to HTML? HTML itself is a static language and can't process data that way. You can use Java Scripts to achieve what you are trying to do. See if this helps http://stackoverflow.com/questions/17066636/parsing-json-objects-for-html-table — Junaid, Aug 04 '16 at 05:01

score 0 · Answer 1 · answered Aug 04 '16 at 05:27

The main reason your code doesnt work is you put a data.entries param for the each function which is undefined. That has to represent a valid key from the json api.

There is two main keys inside the api (for this instance they are Live and Test) so you have to put an each loop inside another one. Then you need to use i to get the name, not f.

var dmJSON = "http://census.daybreakgames.com/json/status?game=h1z1";
$.getJSON(dmJSON, function(data) {
  $.each(data.h1z1, function(i, f) {
    $.each(f, function(i, f) {
        var tblRow = "<tr>" + "<td>" + i + "</td>" + "<td>" + f.region_code + "</td>" + "<td>" + f.title + "</td>" + "<td> " + f.status + "</td>" + "<td>" + f.age + "</td>" + "</tr>"
        $(tblRow).appendTo("#entrydata tbody");
    });
  });
});

It still does not work, Nothing will show up in the table. – Jamie Duke Aug 04 '16 at 06:24 — Jamie Duke, Aug 04 '16 at 06:24

Trying to Parse Json to a HTML Table

1 Answers1