Organizational Research By

Surprising Reserch Topic

How To Convert JSON Data Into Html Table Using Javascript jQuery


How To Convert JSON Data Into Html Table Using Javascript jQuery


In this tutorial i am going to explain about how to display the json data into html table using javascript & jquery.



For explaining how we convert the json data into html table using javascript & jquery we have created a json file that contains the below json data.

Json File

[ {"Model" : "Iphone 18", "Name" : "iOS", "Share" : 57.56,"Price Range":"$800 - $1000","Brand":"Apple"},
 {"Model" : "Nexus 23", "Name" : "Android", "Share" : 24.66,"Price Range":"$600 - $800","Brand":"Samsung"},
 {"Model" : "Tom-tom", "Name" : "Java ME", "Share" : 10.72,"Price Range":"$200 - $900","Brand":"X Brand"},
{"Model" : "Nokia 66610", "Name" : "Symbian", "Share" : 2.49,"Price Range":"$100 - $500","Brand":"Nokia"},
 {"Model" : "Blackberry", "Name" : "Blackberry", "Share" : 2.26,"Price Range":"$100 - $1000","Brand":"Blackberry"},
 {"Model" : "Lumia", "Name" : "Windows Phone", "Share" : 1.33,"Price Range":"$200 - $600","Brand":"Nokia"},
 {"Model" : "iPhone 6", "Name" : "Java ME", "Share" : 10.72,"Price Range":"$200 - $900","Brand":"X Brand"},
 {"Model" : "Nokia 66610", "Name" : "Symbian", "Share" : 2.49,"Price Range":"$100 - $500","Brand":"Nokia"},
 {"Model" : "Micromax", "Name" : "Blackberry", "Share" : 2.26,"Price Range":"$100 - $1000","Brand":"Blackberry"},
 {"Model" : "Lumia ", "Name" : "Windows Phone", "Share" : 1.33,"Price Range":"$200 - $600","Brand":"Nokia"} ] 

To explain the process of converting json data to html table first include the jQuery library in your page. 


" rel="nofollow" target="_blank">https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

In the html file i have created table element with id jsonTable. It is used to append the rows and columns that is generated from the json data using javascript and jquery function.Below is the html markup used.
 

 
 
 
Now the getJson function in the jQuery library is used to read the json 
data from data.json file. Once the json data is read from the file 
addAllColumnHeaders function is used to generate the column headers from
 the json data. And then the json data is read record by record and then
 added to the table. Below is the javascript code used.

 
 
asked Jul 7, 2015 in JAVASCRIPT by rajesh
0 votes
195 views



Related Hot Questions



Government Jobs Opening


...