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

Puzzles for kids - 12 Days Of Christmas

By
According to the traditional song, on the first day of Christmas (25th December), my true love sent to me: . A partridge in a pair tree On the second day of Christmas (26th December), my true love sent to me THREE presents: . Two turtle doves . A partridge in a pear tree On the third day of Christmas (27th December and so on) my true love sent to me SIX presents: . Three French hens . Two turtle doves . A partridge in a pear tree This carries on until the the twelfth day of Christmas, when my true love sends me: Twelve drummers drumming Eleven pipers piping Ten lords a-leaping Nine ladies dancing Eight maids a-milking Seven swans a-swimming Six geese a-laying Five gold rings Four calling birds Three French hens Two turtle doves A partridge in a pear tree After the twelve days of Christmas are over, how many presents has my true love sent me altogether? Our Solution: 1 + 3 + 6 + 10 + 15 + 21 + 28 + 36 + 45 + 55 + 66 + 78 = 364 presents Which is really interesting when you think ...
Post a Comment
Read More...

Asp.Net DataTable Manipulation - Add, Update,Delete & Sort DataTable in C#.Net & VB.Net

By Anonymous
In the asp.net developer's life it is very common to come across the datatable manipulation. So here i have decided to explain the datatable manipulation like adding records to datatable, editing and updating datatable records,deleting records from datatable based on the condition and finally sorting datatable based on columns.
Post a Comment
Read More...