How do I convert a JSON Object into a HTML table?

html, html-table, json

Solution

It's very simple with jQuery:

$(function() {
  var jsonObj = $.parseJSON('{"a":1,"b":3,"ds":4}');
  var html = '<table border="1">';
  $.each(jsonObj, function(key, value) {
    html += '<tr>';
    html += '<td>' + key + '</td>';
    html += '<td>' + value + '</td>';
    html += '</tr>';
  });
  html += '</table>';
  $('div').html(html);
});

Here is link to the working fiddle.

UPDATE: an alternative way to achieve this is by using a library called dynatable to convert the JSON into a sortable table.

Problem

I've got a JSON object that looks like this: ``` {"a": 1, "b": 3, "ds": 4} ``` I'd like to convert it into a HTML table that looks like this: ``` name | Value a 1 b 3 ds 4 ``` Could anyone tell me how to achieve this?

Original source