json to table in javascript/jquery

Question

Can anyone help me on this, I have the json data that i want to convert into table using javascript or jquery. Here's my sample json data:

{"company_name":"McDonalds","address":"John Street","city":"San Antonio","noemployee":"100"}

I want the table output should look like this:

    Company Name  Address  City          Noemployee
    McDonaldsJohn Street   San Antonio   100

Just to clarify "company_name":"McDonalds" = <thead><tr><th>Company Name</th></tr></thead><tbody><tr><td>McDonalds</td></tr></tbody>

@Cris show us what you have tried in `Jquery`. Add you have tried `jquery code`. if you want to get the complete `program code` [Please hire someone](http://careers.stackoverflow.com/employer/search#!/). — yeshansachithak, Aug 26 '14 at 08:10
possible duplicate of [Using jQuery to build table rows from Ajax response(Json)](http://stackoverflow.com/questions/17724017/using-jquery-to-build-table-rows-from-ajax-responsejson) — yeshansachithak, Aug 26 '14 at 08:11

score 1 · Answer 1 · answered Aug 26 '14 at 08:06

1

Take a look at jQuery datatables plugin or jQgrid plugin

answered Aug 26 '14 at 08:06

Fseee

2,476
9
40
63

using jquery datatable will help you lot +1 for this – Dev Aug 26 '14 at 08:09

Prathik Rajendran M · Accepted Answer · 2014-08-26T08:28:32.710

You can use lodash to do this

var d = {"company_name":"McDonalds","address":"John Street","city":"San Antonio","noemployee":"100"},

keys = _.keys(d), //Fetching the keys

thead = _.reduce(keys, function(s,i) { return s + "<th>" + i + "</th>"; }, ''),
thead = "<thead><tr>"+thead+"</tr></thead>",

tbody = _.reduce(keys, function(s,i) { return s + "<td>" + d[i] + "</td>"; }, ''),
tbody = "<tbody><tr>" + tbody + "</tr></tbody>",

table = "<table>" + thead+tbody+"</table>";

_.reduce takes an array and converts it into a single element. Go through the docs to learn how it works.

Here is the jQuery version

var d = {"company_name":"McDonalds","address":"John Street","city":"San Antonio","noemployee":"100"},

var t='',b=''; 

$.each(d, function(v) { t += "<th>" + v + "</th>"; }); 

t = "<thead>"+t+"</thead>"; 

$.each(d, function(v) { b += "<td>" + d[v] + "</td>"; }); 

b = '<tbody>'+b+'</tbody>'; 

var tab = "<table>" + t + b + "</table>";

json to table in javascript/jquery

2 Answers2