Skip to main content

How To Convert JSON Data Into Html Table Using Javascript jQuery

By
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.

data.json:

[ {"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.

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.

Below is the output.

How To Convert JSON Data Into Html Table Using Javascript jQuery


Related Searches

json to html table jquery,convert json to html table,json to html table online,json to html table javascript,json to html table php,json to html table example,json data to html table,php json to html table,jquery build table from json,jquery fill table from json,jquery display json in table,convert json string to html table,json object to html table,jquery create table from json data,display json data in table,javascript json to table,populate html table with json data,jquery build table from json

You May Also Like:
  1. Check div/element/object is visible or hidden using Jquery
  2. Add remove select and set items in select drop down list
  3. Bind unbind event in jQuery
  4. Check a checkbox using jQuery or JavaScript?
  5. Check uncheck all checkboxes in grid view using jquery
  6. Code to get all form element values using JQuery
  7. Get current url using JavaScript jQuery
  8. How to get the keycode for different browser for keyboard characters
  9. Move items in drop down list from left to right using jQuery
  10. Show hide password characters using javascript,jquery
  11. Toggle Checkbox Checked Property Using jQuery

Download the source code to convert json to html table:

Source code of How To Convert JSON Data Into Html Table Using Javascript jQuery

Labels:

Comments

  1. Сука Блять1:42 pm, October 22, 2015

    I have a different JSON structure with yours. Here is my structure:
    {"State":0,"Message":"","Kategoris":[{"KodeKategori":"A","Nama":"REFERENSI SPASIAL","Definisi":"","UnsurAbstrak":true,"Alias":"","SumberDefinisi":"","Tanggal":"\/Date(-62135596800000-0000)\/","TipeTanggal":"","Edisi":"","Role":"","OtherCitationDetail":"","NamaKatalog":"Katalog Unsur Geografis","NamaOrganisasi":"Badan Informasi Geospasial"}, ...and so on... ]}

    How can I show this data? Can you help me please. Thanks

    ReplyDelete
  2. Anonymous10:39 pm, December 15, 2015

    Wonderful, thank you!

    ReplyDelete
  3. Anonymous3:33 am, February 19, 2016

    Nice and elegant. Could you please explain what is happening inside both loops. I'm new and would like to fully understand what is happening here:
    **
    if ($.inArray(key, columnSet) == -1) {
    columnSet.push(key);
    alert(columnSet);
    headerTr$.append($('th/').html(key))
    **
    var cellValue = msg[i][columns[colIndex]];
    if (cellValue == null) { cellValue = ""; }
    row$.append($('td/').html(cellValue));

    ReplyDelete

Post a Comment

Popular posts from this blog

Code to create log files in C#.Net|Asp.Net

By
Introduction: In my previous article I have explained about how to create, delete and check whether the directory exists using C#.Net . In this article I am going to explain about  How to create log files in C#.Net. Explanation: Log files are useful to track any runtime errors and exceptions in all the applications. Below code will code will get the Message and Pagename as the input and creates the log file in that date. For that first i have imported below two namespaces.
4 comments
Read More...

Dynamically programmatically add contols at run time Asp.Net

By
Introduction: In my previous article I have explained about What is View State? How to Store and retrieve values from View State . In this article I am going to explain how to add controls programmatically on run time. Explanation: This example adds a text box and button to a Web Forms page at run time. It also dynamically binds an event handler to the button's   Click   event. The handler displays the values of the dynamically generated text box. The controls are added into a   Panel   Web server control, which acts as a placeholder. The controls are separated in the panel with line breaks (HTML <BR> elements), which are added to the panel using the   LiteralControl   control.
Post a Comment
Read More...

Code To Convert rupees(numbers) into words using C#.Net

By
Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...
16 comments
Read More...