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. — yeshansachithak
– yeshansachithak, Commented Aug 26, 2014 at 8:10
possible duplicate of Using jQuery to build table rows from Ajax response(Json) — yeshansachithak
– yeshansachithak, Commented Aug 26, 2014 at 8:11

Fseee · Accepted Answer · 2014-08-26 08:06:19Z

1

Take a look at jQuery datatables plugin or jQgrid plugin

answered Aug 26, 2014 at 8:06

Fseee

2,6199 gold badges42 silver badges68 bronze badges

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

1 Comment

Dev Over a year ago

using jquery datatable will help you lot +1 for this

Prathik Rajendran M · Accepted Answer · 2014-08-26 08:28:32Z

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>";

Collectives™ on Stack Overflow

json to table in javascript/jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related