JSON to HTML Table | Javacodepoint

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, th 
Convert JSON data into a html table using Javascript
 
Click the following button to convert JSON results into HTML table
 
 Click Here 
 
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, th 
Convert JSON data into a html table using Jquery
 
Click the following button to convert JSON results into HTML table
 
 Click Here 
 
Resulting Table:
    

Источник

Display JSON Data in HTML Page

JSON format is highly used to store data in a structured way. Even data received from a server is in JSON format. Here we will see how to display JSON data in HTML page using JavaScript in form of tables and lists.

JSON data has a structure like a javascript object. Data is stored in key-value pairs, where the key is a string and value can be any type of data.

First, you may think to display these data directly as text on the webpage but this doesn’t look appealing also is not readable.

SSo in this article, we will fetch JSON data from a local or remote server and display it in a better way.

Display JSON data in HTML page using JavaScript

To start working with let our JSON data be following. Source link.

Now we will fetch this JSON data from the remote server and display it on the webpage.

To read JSON data from the local or remote servers we will use the fetch() method.

The fetch() method takes the URL of the JSON file as an argument and returns a Promise object.

After resolving the Promise object we will get the JSON data in the Response object.

fetch(URL) // get the JSON data .then(response => response.json()) // use (display) the JSON data .then(data => console.log(data))

We have the JSON data in data stored in a variable. Now we can use it to display the data in the webpage.

1. Display JSON Data As List

To display the JSON data in a list we will create HTML elements dynamically and insert data in them.

Elements we need to create here are ul and li .

Before we start keep the data structure of JSON data in mind. The image below shows to get the first student name we have to use data.result[0].name and to get first student marks we have to use data.result[0].marks , where to access marks of math subject we have to use data.result[0].marks.math .

Keeping the above structure in mind we first create a ul element and assign it to a variable.

const mainUL = document.createElement('ul')

This ul element will be the main element any list element ( li ) will represent a student and their marks and will be created dynamically.

Now we can create a for loop that will iterate over the data.result array and create a li element for each student and set innerHTML of the li element to the student name.

Now create another list that will contain all the marks of the student and append it to the li element (studentLI) created just before.

for(let i = 0; i < data.result.length; i++) < const studentLI = document.createElement('li'); studentLI.innerHTML = data.result[i].name; // create list for marks const marksUL = document.createElement('ul'); for(var key in data.result[i].marks) < const marksLI = document.createElement('li'); marksLI.innerHTML = key + ': ' + data.result[i].marksJavascript table json data; marksUL.appendChild(marksLI); >// append marks list to studentLI studentLI.appendChild(marksUL); >

Now we have created a list of students and their marks. Now we can append the ul element to the mainUL element.

// append studentLI to mainUL mainUL.appendChild(studentLI);

Finally, append it to the body. Here is the complete code to display the list of students and their marks.

Show List  

2. Display JSON Data As Table

To display the JSON data in a table we will create a function that takes JSON data as an argument and creates a table and append it to the body.

In the function createtable() create the basic structure of the table so that we have the heading of the table as ‘name’ and ‘marks’. Below these marks create another list to show the subject as shown in the code below.

var table = ""; // add a row for name and marks table += ` Name Marks `; // now add another row to show subject table += ` Math English Chemistry Physics `;

Now we can create a for loop that will iterate over the data.result array and create a tr element for each student and set innerHTML of the tr element to the student name.

// now loop through students // show their name and marks var tr = ""; for(let i = 0; i < data.result.length; i++) < tr += ""; tr += `$ `; for (var key in data.result[i].marks) < tr += `$ `; > tr += "" >

Finally, append the table to the body. Here is the complete Javascript code for fetching JSON data and displaying it as a table.

function showTable() < fetch("./lib/examples/students.json") .then(response =>response.json()) .then(data => createTable(data)); > function createTable(data) < var table = ""; // add a row for name and marks table += ` `; // now add another row to show subject table += ` `; // now loop through students // show their name and marks var tr = ""; for(let i = 0; i < data.result.length; i++) < tr += ""; tr += `$ `; for (var key in data.result[i].marks) < tr += `$ `; > tr += "" > table += tr + "
Name
 
Marks
 
Math
 
English
 
Chemistry
 
Physics
 
"; // append table to body document.body.innerHTML += table; >

Conclusion

In this short tutorial, we saw how to fetch and display JSON data in HTML pages using javascript. We displayed data as a list and table with a complete explanation of the code.

Источник

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
 Convert JSON to 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 Convert JSON 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.

Related Articles:

You might like this:

Источник