How to build a table with JSON data that came from an AJAX call?

Question

My attempt to dynamically build an HTML table was futile. Code works, but it doesn't output exactly what I need. There are only 2 properties within my JSON output: location and completed_on Instead of getting this:

+-------------------+---------------------+ | Location | Completed on | +-------------------+---------------------+ | 10 Duskwood Dr. | 2015-07-06 14:10:42 | | 2 Booty Bay Blvd. | 2015-07-09 13:44:38 | +-------------------+---------------------+

Code shows this(no thead visible):

[ { " l o c a ... ] ... prints the whole JSON character by character inside many <td> tags...

This is an example of a typical JSON data I have to work with:

[{"location":"10 Duskwood Dr.","completed_on":"2015-07-06 14:10:42"}, {"location":"2 Booty Bay Blvd.","completed_on":"2015-07-09 13:44:38"}]

This is the table markup I have hard coded into HTML and update with JSON:

<table id="completed_locations" class="table table-striped"> <thead> <tr> <th>Location</th> <th>Completed on</th> </tr> </thead> <tbody> // JSON data goes here </tbody> </table>

I use this code to build <tr> and <td>:

// this is called within success of ajax to build table var oldTable = document.getElementById('completed_locations'), newTable = oldTable.cloneNode(); for(var i = 0; i < output.length; i++){ var tr = document.createElement('tr'); for(var j = 0; j < output[i].length; j++){ var td = document.createElement('td'); td.appendChild(document.createTextNode(output[i][j])); tr.appendChild(td); } newTable.appendChild(tr); } oldTable.parentNode.replaceChild(newTable, oldTable);

Cerbrus has already pointed out your first problem (you have a JSON string, you need to parse it to get the actual JavaScript array). The next thing you'll need to fix is the creation of the <td> elements, which looks wrong if you have an array of objects, not an array of arrays. — Anthony Grist
– Anthony Grist, Commented Jul 10, 2015 at 14:39

Cerbrus · Accepted Answer · 2015-07-10 14:49:04Z

I suspect your output variable is still in it's JSON string format.
This would cause the for loops to iterate over every single letter in the string, instead of over every entry in the array.

Try adding:

output = JSON.parse(output);

before your for loops.

The reason this doesn't throw any errors, is because the outer loop iterates over the full length of the JSON string, then in the inner loop, output[i].length always is 1, since it's a 1-character string. The inner loop will always access output[i][0], and then terminate that loop.

Now, to fix the actual creation of the table:

var output = '[{"location":"10 Duskwood Dr.","completed_on":"2015-07-06 14:10:42"},{"location":"2 Booty Bay Blvd.","completed_on":"2015-07-09 13:44:38"}]', oldTable = document.getElementById('completed_locations'), newTable = oldTable.cloneNode(); output = JSON.parse(output); for(var i = 0; i < output.length; i++){ var tr = document.createElement('tr'); // No need to loop here with only 2 properties var td = document.createElement('td'); td.appendChild(document.createTextNode(output[i].location)); tr.appendChild(td); td = document.createElement('td'); td.appendChild(document.createTextNode(output[i].completed_on)); tr.appendChild(td); newTable.appendChild(tr); } oldTable.parentNode.replaceChild(newTable, oldTable);

<table id="completed_locations" class="table table-striped"> <thead> <tr> <th>Location</th> <th>Completed on</th> </tr> </thead> <tbody> // JSON data goes here </tbody> </table>

If you have more columns, you could loop over them, instead:

var columns = ['location', 'completed_on']; for(var i = 0; i < output.length; i++){ var tr = document.createElement('tr'), td; for(var j = 0; j < columns.length; j++){ td = document.createElement('td'); td.appendChild(document.createTextNode(output[i][columns[j]])); tr.appendChild(td); } newTable.appendChild(tr); }

That made my alert(output) show [object Object],[object Object], and now nothing shows up in the table.
Good, that means output is an actual object now, just a JSON string. Now we just have to iterate over it.

Collectives™ on Stack Overflow

How to build a table with JSON data that came from an AJAX call?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related