- How to convert JSON data to a html table using JavaScript/jQuery?
- Convert JSON data into HTML tables using JavaScript
- Example
- Convert JSON data into a html table using Javascript
- Resulting Table:
- Example: Convert JSON data into HTML tables using jQuery
- Convert JSON data into a html table using Jquery
- Resulting Table:
- Convert JSON Data Dynamically to HTML Table using JavaScript
- The JSON structure
- Convert JSON to HTML Table using Javascript
- Overview
- How do convert JSON to a Table?
- Javascript code to show JSON data in HTML
- Convert JSON data to simple HTML Table
- JSON to HTML Table Live Demo
- How to convert JSON to a bootstrap Table in javascript?
- Create a bootstrap table from JSON data example
- JSON To Bootstrap Table Live Demo
- Conclusion
- Related Articles:
- You might like this:
How to convert JSON data to a html table using JavaScript/jQuery?
JSON (JavaScript object notation) is a powerful data format to exchange data from server to client and vice versa. HTML tables are powerful tools to represent data in tabular format so that it becomes very easy to read, analyze and compare. It is very common in web development to convert JSON data into HTML tables.
In this article, we will learn how to convert JSON data into HTML tables using Javascript as well as jQuery. By the end of this article, you will have a solid understanding of JSON to HTML table conversion.
Convert JSON data into HTML tables using JavaScript
Here are the following steps to create HTML tables using JSON data.
- Create a function named “convert”.
- Create a sample JSON data.
- Get the container using getElementByID(“container”) where we will append the table.
- Get the keys of the first object of the JSON data so that we get the headings of the table.
- Loop through the column names, create header cells, and set the column name as the text of the header cell.
- Append the header cells to the header row and then append the header row to the header
- Append the header to the table
- Loop through the JSON data, create table rows, get the values of the current object in the JSON data using Object.values(item), and create table cells.
- Set the value as the text of the table cell, append the table cells to the table row, and then append the table row to the table.
Example
In this example, we are converting JSON data into HTML tables using Javascript.
table, th, td < border: 1px solid black; border-collapse: collapse; >td, thConvert JSON data into a html table using Javascript
Click the following button to convert JSON results into HTML table
Resulting Table:
Example: Convert JSON data into HTML tables using jQuery
Here is the code to convert Convert JSON data into HTML tables using jQuery.
table, th, td < border: 1px solid black; border-collapse: collapse; >td, thConvert JSON data into a html table using Jquery
Click the following button to convert JSON results into HTML table
Resulting Table:
Convert JSON Data Dynamically to HTML Table using JavaScript
JSON or JavaScript Object Notation is a simple easy to understand data format. JSON is lightweight and language independent. Here, in this article I’ll show you how to convert JSON data to an HTML table using JavaScript. In addition, you will learn how you can create a table in JavaScript dynamically using createElement() Method.
The JSON structure
The JSON for this example looks like this.
The above JSON has an array of three different Books with ID, Name, Category and Price. Just three records for the example. You can add more.
I want the program to read JSON data, get the columns (Book ID, Book Name etc.) for the <table> header, and the values for the respective headers.
In the markup section, I have a button to call a JavaScript function, which will extract the JSON data from the array, create a <table> with header and rows dynamically and finally populate the data in it. I also have DIV element that will serve as a container for our table. After I populate the data, I’ll append the <table> to the <div>.
<!DOCTYPE html> <html> <head> <style> table, th, td < border: solid 1px #ddd; border-collapse: collapse; padding: 2px 3px; text-align: center; >th < font-weight:bold; ></style> </head> <body> <input type='button' onclick='tableFromJson()' value='Create Table from JSON data' /> <p ></p> </body> <script> let tableFromJson = () => < // the json data. const myBooks = [ , , ] // Extract value from table header. // ('Book ID', 'Book Name', 'Category' and 'Price') let col = []; for (let i = 0; i < myBooks.length; i++) < for (let key in myBooks[i]) < if (col.indexOf(key) === -1) < col.push(key); > > > // Create table. const table = document.createElement("table"); // Create table header row using the extracted headers above. let tr = table.insertRow(-1); // table row. for (let i = 0; i < col.length; i++) < let th = document.createElement("th"); // table header. th.innerHTML = col[i]; tr.appendChild(th); > // add json data to the table as rows. for (let i = 0; i < myBooks.length; i++) < tr = table.insertRow(-1); for (let j = 0; j < col.length; j++) < let tabCell = tr.insertCell(-1); tabCell.innerHTML = myBooks[i][col[j]]; > > // Now, add the newly created table with json data, to a container. const divShowData = document.getElementById('showData'); divShowData.innerHTML = ""; divShowData.appendChild(table); > </script> </html>
The JSON data that I have mentioned is stored in an array called myBooks . The structure is very simple and you can add more data to it.
First, it extracts values for the table’s header. For that I have declared another array called var col = [] . It will loop through each JSON and checks the first key index and store it in the array. See the output in your browsers console window.
for (let i = 0; i < myBooks.length; i++) < for (let key in myBooks[i]) < col.push(key); console.log (key); > >
Next, it creates an <table> dynamically with a row for the header.
const table = document.createElement("table"); let tr = table.insertRow(-1); // Table row. In the first row of the table, I’ll create <th> (table header), assign values (from the array col []) for the header and append the <th> to the row.
for (let i = 0; i < col.length; i++) < let th = document.createElement("th"); // Table header. th.innerHTML = col[i]; tr.appendChild(th); >
Finally, we will get the real values under each header, create cells for each table row and store the value in it.
tabCell.innerHTML = myBooks[i][col[j]]; // Get book details for each header.
It is like getting value from myBooks[i] of column col [j] . Remember array col [] has a list of unique headers.
At the end, we are adding the newly created <table> to a container (a DIV element). That’s it. Hope you find this example useful. Thanks for reading. ☺
Convert JSON to HTML Table using Javascript
This article shows you how can you convert JSON to HTML table using Javascript. It also shows you to display the JSON data in the Bootstrap table.
Overview
Javascript JSON is a standard key-value pair (text-based format) for representing structured data based on Javascript object syntax. It is commonly used for transferring data in web applications such as sending data from the server to the client or vice-versa.
The JSON object format is a little technical for the end user to understand, so displaying the JSON data on the web page in HTML table format is very helpful for the end user to understand.
In this article, you will learn to display JSON data in an HTML table using javascript as well as display JSON data objects in a responsive bootstrap table.
How do convert JSON to a Table?
To convert a JSON object to an HTML table, we should have some JSON. Let’s assume, we have employee records in the form of a JSON object which contains the employee information (employee name, address, email id, and age) as follow:
[ < "Employee Name":"Rahul Singh", "Address":"Hyderabad", "Email ID":"[email protected]", "Age":25 >, < "Employee Name":"Pawan Patil", "Address":"Mumbai", "Email ID":"[email protected]", "Age":27 >, < "Employee Name":"karl Jablonski", "Address":"Seattle", "Email ID":"[email protected]", "Age":25 >, < "Employee Name":"Jhon Smith", "Address":"New Yark", "Email ID":"[email protected]", "Age":22 >]
Javascript code to show JSON data in HTML
Let’s see the javascript code with a complete example to create a table from a JSON object as follow:
Convert JSON data to simple HTML Table
JSON to HTML Table Live Demo
Live Demo
How to convert JSON to a bootstrap Table in javascript?
To make the table responsive, we create the bootstrap table. With the small modification in the above example, we can convert JSON to a bootstrap table example in javascript. Bootstrap has a lot of pre-defined class names for making tables responsive such as .table, .table-bordered, .table-striped, etc.
We have to import the following bootstrap CSS library into the tag of the HTML document.
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
Create a bootstrap table from JSON data example
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> Convert JSON data to Bootstrap Table
JSON To Bootstrap Table Live Demo
Live Demo
Conclusion
In this article, you have seen displaying the JSON object data to a simple HTML table as well as a bootstrap responsive table using javascript.
If you want to display an Excel file data into a table, read another article here: Display Excel data in HTML Table using SheetJS in JavaScript.