Hi Guys, 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"} Code (JavaScript): I want the table output should look like this: <table> <thead> <tr> <th>Company Name</th> <th>Address</th> <th>City</th> <th>Noemployee</th> </tr> </thead> <tbody> <tr> <td>McDonalds</td> <td>John Street</td> <td>San Antonio</td> <td>100</td> </tr> </tbody> </table> HTML: Thank you in advance.
this is my idea about what you need to do, all things you can make is with javascript or jquery : 1. make variable to store thet json data. 2. make code to create html element for table header. 3. make a looping base on the number of json data. for data above is one. but maybe your data is not just one. 4. inside the looping you can write code in javascript to create each table element and set the attribut with your json value. 5. you can see the result. I can make it to you. but I need some coffee to company me write the code. PM me or add my skype (najilil) if you want me to write the code in javascript. regards, najilil
I just quickly put this together for you. I've added comments which explain everything I did and why. <html> <head> <title>Parse JSON</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function() { // the json data we are going to be parsing var data = '[{"company_name":"McDonalds","address":"John Street","city":"San Antonio","noemployee":"100"},{"company_name":"Burger King","address":"Burton Street","city":"Washington","noemployee":"12"}]'; // I would add some code here to test that the data exists // convert the json to a javascript object we can loop through var converted = $.parseJSON(data); // add some more code here to check the data parsed okay // variable to hold parsed data var html; $.each(converted, function(key,value) { html += '<tr>' + '<td>' + value.company_name + '</td>' + '<td>' + value.address + '</td>' + '<td>' + value.city + '</td>' + '<td>' + value.noemployee + '</td>' + '</tr>'; }); // place the parsed html into the table $('[data-populate] tbody').html(html); }); </script> </head> <body> <table data-populate="true" cellpadding="5" cellspacing="0"> <thead> <tr> <th>Company Name</th> <th>Address</th> <th>City</th> <th>Employees</th> </tr> </thead> <tbody> <!-- dynamic content is loaded here --> </tbody> </table> </body> </html> Code (markup): Cheers
Thanks for the answer, just to clarify ng question I need the table head will be also dynamicaly using the json data. "company_name":"McDonalds" = <tr><th>company_name</th></tr><tbody><tr><td>McDonalds</td></tr></tbody> najilil, thanks for the tip I will use your idea. Thanks
Please check the updated code: <html> <head> <title>Parse JSON</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function() { // the json data we are going to be parsing var data = '[{"company_name":"McDonalds","address":"John Street","city":"San Antonio","noemployee":"100"},{"company_name":"Burger King","address":"Burton Street","city":"Washington","noemployee":"12"}]'; // I would add some code here to test that the data exists // convert the json to a javascript object we can loop through var converted = $.parseJSON(data); // add some more code here to check the data parsed okay // variable to hold parsed data var html, tableHeader; // function to remove _ and capitalize table headings var formatTableHeading = function(heading) { return heading.replace('_', ' ').split(' ').map(function(i){return i[0].toUpperCase() + i.substring(1)}).join(' '); } $.each (converted, function(key,value) { // build the table header if it isn't set if (!tableHeader) { tableHeader = '<tr>'; for (column in value) { tableHeader += '<th>' + formatTableHeading(column) + '</th>'; } tableHeader += '</tr>'; } // build the table body html += '<tr>' + '<td>' + value.company_name + '</td>' + '<td>' + value.address + '</td>' + '<td>' + value.city + '</td>' + '<td>' + value.noemployee + '</td>' + '</tr>'; }); // place the table header $('[data-populate] thead').html(tableHeader); // place the parsed html into the table body $('[data-populate] tbody').html(html); }); </script> </head> <body> <table data-populate="true" cellpadding="5" cellspacing="0"> <thead> <!-- dynamic content is loaded here --> </thead> <tbody> <!-- dynamic content is loaded here --> </tbody> </table> </body> </html> Code (markup):