show json data in table using javascript
- Published
- Reading time
- 2 min read
- Length
- 376 words
On this page
Show JSON Data in Table Using JavaScript#
If you want to display your JSON data in a table format on your web page, you can easily do so with JavaScript. Here's how:
Step 1: Create a Table and a Head Row#
The first step is to create an HTML table with a head row that will contain the column headings. You can do this using the <table>, <thead>, and <tr> tags:
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
</table>Step 2: Parse Your JSON Data#
The next step is to parse your JSON data using JavaScript. You can do this using the JSON.parse() method:
var myData = JSON.parse('[
{"name": "John Smith", "age": 35, "location": "New York"},
{"name": "Jane Doe", "age": 27, "location": "Los Angeles"},
{"name": "Bob Johnson", "age": 42, "location": "Chicago"}
]');Step 3: Loop Through Your Data and Add Rows to the Table#
Finally, you can loop through your data and add rows to the table using JavaScript. You can do this using the <tbody> and <tr> tags:
var table = document.getElementById("myTable");
var tbody = document.createElement("tbody");
for (var i = 0; i < myData.length; i++) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
nameCell.innerHTML = myData[i].name;
row.appendChild(nameCell);
var ageCell = document.createElement("td");
ageCell.innerHTML = myData[i].age;
row.appendChild(ageCell);
var locationCell = document.createElement("td");
locationCell.innerHTML = myData[i].location;
row.appendChild(locationCell);
tbody.appendChild(row);
}
table.appendChild(tbody);And that's it! Your JSON data should now be displayed in a table on your web page.
Alternative Method: Use jQuery#
If you're using jQuery on your web page, you can also use the $.each() method to loop through your JSON data and add rows to the table. Here's an example:
var myData = JSON.parse('[
{"name": "John Smith", "age": 35, "location": "New York"},
{"name": "Jane Doe", "age": 27, "location": "Los Angeles"},
{"name": "Bob Johnson", "age": 42, "location": "Chicago"}
]');
$.each(myData, function(index, value) {
var row = "<tr><td>" + value.name + "</td><td>" + value.age + "</td><td>" + value.location + "</td></tr>";
$("#myTable tbody").append(row);
});Using jQuery can make the process a bit simpler and more concise.
Remember to include the highlight.js library to display syntax highlighting for your code snippets!