βΉοΈ Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm |
| Last Crawled | 2026-04-16 22:19:47 (4 hours ago) |
| First Indexed | 2018-12-15 17:18:13 (7 years ago) |
| HTTP Status Code | 200 |
| Meta Title | Dynamically Convert JSON to HTML Table Using JavaScript |
| Meta Description | Learn how to convert JSON data to an HTML table dynamically using pure JavaScript also learn to create table rows dynamically using JavaScript. |
| Meta Canonical | null |
| Boilerpipe Text | JSON
, or JavaScript Object Notation, is a simple and easy-to-understand data format. It is lightweight and language-independent, making it a popular choice for data interchange. In this article, I will demonstrate how to convert JSON data into an HTML table using JavaScript. Additionally, you will learn how to dynamically
create a table in JavaScript
using the
createElement() method
.
π
First, check if Data is a valid JSON or not.
See this demo
β‘οΈ
Turn raw JSON data into meaningful charts.
The JSON
The JSON for this example looks like this.π Its has a list of
three
different books with ID, Name, Category and Price. Just three records for the example. You can add more.
Note
: You can also
use jQuery to convert data from a JSON file to an HTML table
[
{
"Book ID": "1",
"Book Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"Book ID": "2",
"Book Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"Book ID": "3",
"Book Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
}
]
π
π
Check if the above JSON is valid or not.
I want the program to read JSON data, get the columns (Book ID, Book Name etc.) for <table> header, and the values for the respective headers.
π
Do you know
you can
convert your Excel data into JSON
in a flash using JavaScript?
Check this out.
Its not a plug-in or a third party tool.
The Markup and the Script
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 id="showData"></p>
</body>
<script>
let
tableFromJson
= () => {
const myBooks = [
{'Book ID': '1', 'Book Name': 'Challenging Times',
'Category': 'Business', 'Price': '125.60'
},
{'Book ID': '2', 'Book Name': 'Learn JavaScript',
'Category': 'Programming', 'Price': '56.00'
},
{'Book ID': '3', 'Book Name': 'Popular Science',
'Category': 'Science', 'Price': '210.40'
}
]
const table = document.
createElement
("table");
let tr = table.insertRow(-1);
let col =
Object.keys
(myBooks[0]);
console.log(col);
col.forEach
((item) => {
let th = document.
createElement
("th");
th.innerHTML = item;
tr.appendChild(th);
});
myBooks.forEach
((item) => {
tr = table.insertRow(-1);
let val =
Object.values
(item);
val.forEach
((element) => {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = element;
});
});
const divShowData = document.
getElementById
('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);
}
</script>
</html>
π
Try it
The JSON data is stored in an array named
myBooks
. The structure is straightforward, allowing for easy addition of more data.
First, it creates a
table
element using
createElement()
method.
Next, it creates headers (or columns) for the table by extracting
first
key index (like book id, book name etc.) from the JSON array and
stores each key
in an array named "col". It iterates through each item in the "col" array and uses them to create header to the table.
Remember
, JSON objects are a collection of key and value pairs within curly brases. Each key is enclosed in double quotes followed by a
:
colon.
let col = Object.keys(myBooks[0]);
console.log(col);
col.forEach((item) => {
let th = document.createElement("th"); // table header.
th.innerHTML = item;
tr.appendChild(th);
});
π
Finally it adds the JSON data to the table. It iterates (or loops) through each item in myBooks array, creates a new row (for the table), get values and create table cells.
myBooks.forEach((item) => {
tr = table.insertRow(-1);
let val = Object.values(item);
val.forEach((element) => {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = element;
});
});
π
See this demo
At the end, we'll simply add the newly created <table> to a container (a DIV element). Thatβs it. Hope you find this example useful.
π Read Next
How to Populate a SELECT Dropdown with JSON Data using JavaScript - Two Simple Examples
Build HTML Table from JSON Using Async/Await
Create Dynamic Tables with JavaScript & Save Data Like a Pro
Build a Simple CRUD App with Vanilla JavaScript
Lightweight JavaScript Bot π€ Detection Script
π Ready to code? Try the
Online JavaScript Editor
or Compress HTML and CSS instantly for faster load times using our
π¦ HTML Minifier
.
β Previous
Next β |
| Markdown | Please enable JavaScript to view this page properly.
[](https://www.encodedna.com/ "encodedna.com")
Tech Blog by Arun Banik
β°
β
- [Home](https://www.encodedna.com/ "Home")
- [Sitemap](https://www.encodedna.com/sitemap/tutorials.htm)
- [Tools βΌ](https://www.encodedna.com/tools-you-can-use/)
- [Developer Tools](https://www.encodedna.com/tools-you-can-use/developer-tools.htm)
- [Image Tools](https://www.encodedna.com/tools-you-can-use/image-tools.htm)
- [Content Tools](https://www.encodedna.com/tools-you-can-use/content-tools.htm)
- [Converters & Calculators](https://www.encodedna.com/tools-you-can-use/converters-calculators.htm)
- [About](https://www.encodedna.com/about/)
- / β¨ Tool of the Week: [My Fancy Notepad](https://www.encodedna.com/javascript/contenteditable-div.htm "Your thoughts deserve a space. Write, format, and save with ease.")
# Dynamically Convert JSON to HTML Table Using JavaScript
[json](https://www.encodedna.com/sitemap/tutorials.htm#json "json") [javascript](https://www.encodedna.com/sitemap/tutorials.htm#js "javascript")
Views: **340337**
[β Prev](https://www.encodedna.com/javascript/convert-days-and-month-to-string-javascript.htm "Previous Post")[Next β](https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm "Next Post")
[JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON), or JavaScript Object Notation, is a simple and easy-to-understand data format. It is lightweight and language-independent, making it a popular choice for data interchange. In this article, I will demonstrate how to convert JSON data into an HTML table using JavaScript. Additionally, you will learn how to dynamically [create a table in JavaScript](https://www.encodedna.com/html-generators/html-table-generator.htm) using the [createElement() method](https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm).
π [First, check if Data is a valid JSON or not.](https://www.encodedna.com/json-checker/validate-json.htm)
See this demo
β‘οΈ [Turn raw JSON data into meaningful charts.](https://www.encodedna.com/google-chart/make-charts-using-json-data-dynamically.htm "try our graph maker for free")
## The JSON
The JSON for this example looks like this.π Its has a list of **three** different books with ID, Name, Category and Price. Just three records for the example. You can add more.
**Note**: You can also [use jQuery to convert data from a JSON file to an HTML table](https://www.encodedna.com/jquery/read-json-file-push-data-into-array-and-convert-to-html-table-using-jquery.htm)
```
[
{
"Book ID": "1",
"Book Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"Book ID": "2",
"Book Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"Book ID": "3",
"Book Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
}
]π
```
π [Check if the above JSON is valid or not.](https://www.encodedna.com/json-checker/validate-json.htm)
I want the program to read JSON data, get the columns (Book ID, Book Name etc.) for \<table\> header, and the values for the respective headers.
π **Do you know** you can **convert your Excel data into JSON** in a flash using JavaScript? [Check this out.](https://www.encodedna.com/javascript/practice-ground/default.htm?pg=convert_excel_data_to_json_javascript) Its not a plug-in or a third party tool.
The Markup and the Script
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\>.
Similar example: [How to populate a SELECT Dropdown with data from **external JSON file** using JavaScript](https://www.encodedna.com/javascript/populate-select-dropdown-list-with-json-data-using-javascript.htm)
```
<!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 id="showData"></p>
</body>
<script>
let tableFromJson = () => {
// the json data.
const myBooks = [
{'Book ID': '1', 'Book Name': 'Challenging Times',
'Category': 'Business', 'Price': '125.60'
},
{'Book ID': '2', 'Book Name': 'Learn JavaScript',
'Category': 'Programming', 'Price': '56.00'
},
{'Book ID': '3', 'Book Name': 'Popular Science',
'Category': 'Science', 'Price': '210.40'
}
]
const table = document.createElement("table"); // Create table element.
let tr = table.insertRow(-1); // table row.
// Extract value for table headers.
// ('Book ID', 'Book Name', 'Category' and 'Price')
let col = Object.keys(myBooks[0]);
console.log(col);
col.forEach((item) => {
let th = document.createElement("th"); // table header.
th.innerHTML = item;
tr.appendChild(th);
});
// add json data to the table as rows.
myBooks.forEach((item) => {
tr = table.insertRow(-1);
let val = Object.values(item);
val.forEach((element) => {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = element;
});
});
// Finally, add the newly created table with json data, to a container.
const divShowData = document.getElementById('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);
}
</script>
</html>π
```
Try it
β‘οΈ Now find out [how to read HTML table data using JavaScript](https://www.encodedna.com/javascript/how-to-read-data-from-html-table-using-javascript.htm).
The JSON data is stored in an array named myBooks. The structure is straightforward, allowing for easy addition of more data.
Similar example: [How to bind JSON data to an HTML table in AngularJS using ng-repeat](https://www.encodedna.com/angularjs/tutorial/bind-json-data-to-html-table-in-angularjs-using-ngrepeat.htm)
First, it creates a **table** element using [createElement()](https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm) method.
Next, it creates headers (or columns) for the table by extracting **first** key index (like book id, book name etc.) from the JSON array and **stores each key** in an array named "col". It iterates through each item in the "col" array and uses them to create header to the table.
**Remember**, JSON objects are a collection of key and value pairs within curly brases. Each key is enclosed in double quotes followed by a **:** colon.
```
let col = Object.keys(myBooks[0]);
console.log(col); // Output: (4) ['Book ID', 'Book Name', 'Category', 'Price']
col.forEach((item) => {
let th = document.createElement("th"); // table header.
th.innerHTML = item;
tr.appendChild(th);
});π
```
Related example: [How to read JSON from HTML file input in JavaScript?](https://www.encodedna.com/javascript/how-to-read-json-from-html-file-input.htm)
Finally it adds the JSON data to the table. It iterates (or loops) through each item in myBooks array, creates a new row (for the table), get values and create table cells.
```
// add json data to the table as rows.
myBooks.forEach((item) => {
tr = table.insertRow(-1);
let val = Object.values(item);
val.forEach((element) => {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = element;
});
});π
```
Related Example: [How to read JSON data from external file and convert data to an HTML table](https://www.encodedna.com/javascript/how-to-read-data-from-external-json-file-in-javascript.htm)?
See this demo
At the end, we'll simply add the newly created \<table\> to a container (a DIV element). Thatβs it. Hope you find this example useful.
β‘οΈ [Turn raw JSON data into meaningful charts.](https://www.encodedna.com/google-chart/make-charts-using-json-data-dynamically.htm "try our graph maker for free")
### π Read Next
- [How to Populate a SELECT Dropdown with JSON Data using JavaScript - Two Simple Examples](https://www.encodedna.com/javascript/populate-select-dropdown-list-with-json-data-using-javascript.htm)
- [Build HTML Table from JSON Using Async/Await](https://www.encodedna.com/javascript/fetch-data-from-json-file-display-in-table-using-async-and-await.htm)
- [Create Dynamic Tables with JavaScript & Save Data Like a Pro](https://www.encodedna.com/javascript/dynamically-add-remove-rows-to-html-table-using-javascript-and-save-data.htm)
- [Build a Simple CRUD App with Vanilla JavaScript](https://www.encodedna.com/javascript/how-to-create-a-simple-crud-application-using-only-javascript.htm)
- [Lightweight JavaScript Bot π€ Detection Script](https://www.encodedna.com/javascript/simple-javascript-bot-detection-snippet.htm)
- π Ready to code? Try the [Online JavaScript Editor](https://www.encodedna.com/javascript/practice-ground/) or Compress HTML and CSS instantly for faster load times using our [π¦ HTML Minifier](https://www.encodedna.com/minifier/html-minifier.htm).
[β Previous](https://www.encodedna.com/javascript/convert-days-and-month-to-string-javascript.htm "Previous Post")[Next β](https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm "Next Post")
### Related Examples
1\. [column charts using highcharts with data from json file](https://www.encodedna.com/javascript/column-charts-using-highcharts-with-data-from-json-file.htm)
2\. [Convert JSON File Data into an Array (also using jQuery)](https://www.encodedna.com/javascript/convert-data-in-json-file-in-an-array-using-javascript-or-jquery.htm)
3\. [convert excel data into json](https://www.encodedna.com/javascript/convert-excel-data-into-json.htm)
4\. [Fetch data from JSON file display in table using Async/Await](https://www.encodedna.com/javascript/fetch-data-from-json-file-display-in-table-using-async-and-await.htm)
5\. [how to convert json string to json object in javascript](https://www.encodedna.com/javascript/how-to-convert-json-string-to-json-object-in-javascript.htm)
6\. [how to read data from external json file in javascript](https://www.encodedna.com/javascript/how-to-read-data-from-external-json-file-in-javascript.htm)
7\. [how to read json from html file input](https://www.encodedna.com/javascript/how-to-read-json-from-html-file-input.htm)
8\. [how to use array reduce method on json object](https://www.encodedna.com/javascript/how-to-use-array-reduce-method-on-json-object.htm)
9\. [Dynamically Convert JSON to HTML Table Using JavaScript](https://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm)
10\. [populate select dropdown list with json data using javascript](https://www.encodedna.com/javascript/populate-select-dropdown-list-with-json-data-using-javascript.htm)
- Hi, I am Arun Banik β
- [About Me](https://www.encodedna.com/about/default.htm)
- [Say hi π](mailto:arunbanik21@rediffmail.com)
- [Privacy Policy](https://www.encodedna.com/about/privacy-policy/default.htm)
- [Advertise](https://www.encodedna.com/advertise-on-encodedna/default.htm)
- [Home](https://www.encodedna.com/)
- [Sitemap](https://www.encodedna.com/sitemap/tutorials.htm "A well-organized and comprehensive list of different programming languages")
- Categories β
- [Angular](https://www.encodedna.com/sitemap/tutorials.htm#angular)
- [SQL Server](https://www.encodedna.com/sitemap/tutorials.htm#sqlserver)
- [jQuery](https://www.encodedna.com/sitemap/tutorials.htm#jquery)
- [Ajax](https://www.encodedna.com/sitemap/tutorials.htm#ajax)
- [Asp.Net](https://www.encodedna.com/sitemap/tutorials.htm#csharp)
- [Charts](https://www.encodedna.com/sitemap/tutorials.htm#charts)
- [JavaScript](https://www.encodedna.com/sitemap/tutorials.htm#js)
- [AngularJS](https://www.encodedna.com/sitemap/tutorials.htm#angularjs)
- [DatePicker](https://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm)
- [Css](https://www.encodedna.com/sitemap/tutorials.htm#css)
- [Google](https://www.encodedna.com/sitemap/tutorials.htm#google)
- [Gridview](https://www.encodedna.com/sitemap/tutorials.htm?csharp_gridview)
- [HTML5](https://www.encodedna.com/sitemap/tutorials.htm#html)
- [json](https://www.encodedna.com/sitemap/tutorials.htm#json)
- [Linq](https://www.encodedna.com/sitemap/tutorials.htm#linq)
- [Excel](https://www.encodedna.com/sitemap/tutorials.htm#excel)
- [Reviews](https://www.encodedna.com/sitemap/tutorials.htm#reviews)
- [VBA](https://www.encodedna.com/sitemap/tutorials.htm#excel)
- [WebApi](https://www.encodedna.com/sitemap/tutorials.htm#webapi)
- [XML](https://www.encodedna.com/sitemap/tutorials.htm#xml)
- Tools you can use
- [Online JS Editor](https://www.encodedna.com/javascript/practice-ground/default.htm)
- [Resize Multiple Images at once](https://www.encodedna.com/resize-bulk-images/default.htm)
- [HTML Table Generator](https://www.encodedna.com/html-generators/html-table-generator.htm)
- [Crop Image without Losing Quality](https://www.encodedna.com/onlinetools/resize-crop-image-online.aspx)
- [(%) 3 Way Percentage Calculator](https://www.encodedna.com/onlinetools/percentage-calculator.htm)
- [Color Palette Generator](https://www.encodedna.com/color/color-palette-generator.htm "Create Harmonious Color Schemes Instantly") new
- [Hex 2 RGB Converter](https://www.encodedna.com/hex-to-rgb-converter/default.htm)
- [Random Word Generator](https://www.encodedna.com/random-word-generator/default.htm)
- [Compress HTML - HTML Minifier](https://www.encodedna.com/minifier/html-minifier.htm)
- [Graph Maker](https://www.encodedna.com/google-chart/make-charts-using-json-data-dynamically.htm)
- [The Word Counter](https://www.encodedna.com/wordcounter/default.htm)
- [JSON Checker](https://www.encodedna.com/json-checker/validate-json.htm)
- [Add text to Image](https://www.encodedna.com/text-on-image/add-text-to-image-and-save-the-image.htm)
- [π My Fancy Notepad](https://www.encodedna.com/javascript/contenteditable-div.htm "Your Browserβs Best Writing Buddy")
- [More +](https://www.encodedna.com/tools-you-can-use/default.htm)
[encodedna.com](https://www.encodedna.com/) Copyright Β© 2026, all rights reserved. |
| Readable Markdown | [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON), or JavaScript Object Notation, is a simple and easy-to-understand data format. It is lightweight and language-independent, making it a popular choice for data interchange. In this article, I will demonstrate how to convert JSON data into an HTML table using JavaScript. Additionally, you will learn how to dynamically [create a table in JavaScript](https://www.encodedna.com/html-generators/html-table-generator.htm) using the [createElement() method](https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm).
π [First, check if Data is a valid JSON or not.](https://www.encodedna.com/json-checker/validate-json.htm)
See this demo
β‘οΈ [Turn raw JSON data into meaningful charts.](https://www.encodedna.com/google-chart/make-charts-using-json-data-dynamically.htm "try our graph maker for free")
## The JSON
The JSON for this example looks like this.π Its has a list of **three** different books with ID, Name, Category and Price. Just three records for the example. You can add more.
**Note**: You can also [use jQuery to convert data from a JSON file to an HTML table](https://www.encodedna.com/jquery/read-json-file-push-data-into-array-and-convert-to-html-table-using-jquery.htm)
```
[
{
"Book ID": "1",
"Book Name": "Computer Architecture",
"Category": "Computers",
"Price": "125.60"
},
{
"Book ID": "2",
"Book Name": "Asp.Net 4 Blue Book",
"Category": "Programming",
"Price": "56.00"
},
{
"Book ID": "3",
"Book Name": "Popular Science",
"Category": "Science",
"Price": "210.40"
}
]π
```
π [Check if the above JSON is valid or not.](https://www.encodedna.com/json-checker/validate-json.htm)
I want the program to read JSON data, get the columns (Book ID, Book Name etc.) for \<table\> header, and the values for the respective headers.
π **Do you know** you can **convert your Excel data into JSON** in a flash using JavaScript? [Check this out.](https://www.encodedna.com/javascript/practice-ground/default.htm?pg=convert_excel_data_to_json_javascript) Its not a plug-in or a third party tool.
The Markup and the Script
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 id="showData"></p>
</body>
<script>
let tableFromJson = () => {
const myBooks = [
{'Book ID': '1', 'Book Name': 'Challenging Times',
'Category': 'Business', 'Price': '125.60'
},
{'Book ID': '2', 'Book Name': 'Learn JavaScript',
'Category': 'Programming', 'Price': '56.00'
},
{'Book ID': '3', 'Book Name': 'Popular Science',
'Category': 'Science', 'Price': '210.40'
}
]
const table = document.createElement("table");
let tr = table.insertRow(-1);
let col = Object.keys(myBooks[0]);
console.log(col);
col.forEach((item) => {
let th = document.createElement("th");
th.innerHTML = item;
tr.appendChild(th);
});
myBooks.forEach((item) => {
tr = table.insertRow(-1);
let val = Object.values(item);
val.forEach((element) => {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = element;
});
});
const divShowData = document.getElementById('showData');
divShowData.innerHTML = "";
divShowData.appendChild(table);
}
</script>
</html>π
```
Try it
The JSON data is stored in an array named myBooks. The structure is straightforward, allowing for easy addition of more data.
First, it creates a **table** element using [createElement()](https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm) method.
Next, it creates headers (or columns) for the table by extracting **first** key index (like book id, book name etc.) from the JSON array and **stores each key** in an array named "col". It iterates through each item in the "col" array and uses them to create header to the table.
**Remember**, JSON objects are a collection of key and value pairs within curly brases. Each key is enclosed in double quotes followed by a **:** colon.
```
let col = Object.keys(myBooks[0]);
console.log(col);
col.forEach((item) => {
let th = document.createElement("th"); // table header.
th.innerHTML = item;
tr.appendChild(th);
});π
```
Finally it adds the JSON data to the table. It iterates (or loops) through each item in myBooks array, creates a new row (for the table), get values and create table cells.
```
myBooks.forEach((item) => {
tr = table.insertRow(-1);
let val = Object.values(item);
val.forEach((element) => {
let tabCell = tr.insertCell(-1);
tabCell.innerHTML = element;
});
});π
```
See this demo
At the end, we'll simply add the newly created \<table\> to a container (a DIV element). Thatβs it. Hope you find this example useful.
### π Read Next
- [How to Populate a SELECT Dropdown with JSON Data using JavaScript - Two Simple Examples](https://www.encodedna.com/javascript/populate-select-dropdown-list-with-json-data-using-javascript.htm)
- [Build HTML Table from JSON Using Async/Await](https://www.encodedna.com/javascript/fetch-data-from-json-file-display-in-table-using-async-and-await.htm)
- [Create Dynamic Tables with JavaScript & Save Data Like a Pro](https://www.encodedna.com/javascript/dynamically-add-remove-rows-to-html-table-using-javascript-and-save-data.htm)
- [Build a Simple CRUD App with Vanilla JavaScript](https://www.encodedna.com/javascript/how-to-create-a-simple-crud-application-using-only-javascript.htm)
- [Lightweight JavaScript Bot π€ Detection Script](https://www.encodedna.com/javascript/simple-javascript-bot-detection-snippet.htm)
- π Ready to code? Try the [Online JavaScript Editor](https://www.encodedna.com/javascript/practice-ground/) or Compress HTML and CSS instantly for faster load times using our [π¦ HTML Minifier](https://www.encodedna.com/minifier/html-minifier.htm).
[β Previous](https://www.encodedna.com/javascript/convert-days-and-month-to-string-javascript.htm "Previous Post")[Next β](https://www.encodedna.com/javascript/dynamically-create-html-elements-using-createElement-method.htm "Next Post") |
| Shard | 187 (laksa) |
| Root Hash | 520868219847593787 |
| Unparsed URL | com,encodedna!www,/javascript/populate-json-data-to-html-table-using-javascript.htm s443 |