Convert HTML Table to JSON in JavaScript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article, I will explain that how to convert HTML Table data to JSON using JavaScript.
Code for HTML Page
Implementation: On the HTML page there will be HTML Table with id named table_customers and also place a control Button with id named btn_submit. On the OnClick event handler of the Button I will assign JavaScript function named Convert().
<table id="table_customers" cellspacing="0" cellpadding="0">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>Bharat Bhushan</td>
<td>UK</td>
</tr>
<tr>
<td>2</td>
<td>Raman Kumar </td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Ruhika</td>
<td>Canada</td>
</tr>
<tr>
<td>4</td>
<td>Nancy</td>
<td>Itly</td>
</tr>
</table>
<hr/>
<input type="button" id="btn_submit" value="Submit" onclick="Convert()" />
JavaScript function to convert HTML Table to JSON
When the Submit Button is clicked by the user, the JavaScript function named Convert() will be called. Inside the JavaScript function Convert(), the HTML Table is invoked using the document.getElementById JavaScript function. Then, a loop will be executed over the HTML Table Header cells and the cell values are copied to an Array. And after that, one more loop will be executed over the HTML Table rows. Inside each row a child loop is executed over the cells and copied to a JavaScript object which is later added to a JavaScript Array.
Finally, the JavaScript Array will be converted into a JSON string and displayed in JavaScript Alert Message Box.
<script type="text/javascript">
function Convert() {
var table = document.getElementById("table_customers");
var header = [];
var rows = [];
for (var i = 0; i < table.rows[0].cells.length; i++) {
header.push(table.rows[0].cells[i].innerHTML);
}
for (var i = 1; i < table.rows.length; i++) {
var row = {};
for (var j = 0; j < table.rows[i].cells.length; j++) {
row[header[j]] = table.rows[i].cells[j].innerHTML;
}
rows.push(row);
}
alert(JSON.stringify(rows));
}
</script>
Below I am giving the complete code for this function. You can copy and paste the whole code on your HTML page to enjoy the execution of this program.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
table { border: 1px solid #ccc; border-collapse: collapse; }
table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
table th, table td { padding: 5px; border: 1px solid #ccc; width: 150px }
</style>
</head>
<body>
<table id="table_customers" cellspacing="0" cellpadding="0">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>Bharat Bhushan</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Raman Kumar </td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Ruhika</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Nancy</td>
<td>Russia</td>
</tr>
</table>
<br /><br /><br />
<input type="button" id="btn_submit" value="Submit" onclick="Convert()" />
<script type="text/javascript">
function Convert() {
var table = document.getElementById("table_customers");
var header = [];
var rows = [];
for (var i = 0; i < table.rows[0].cells.length; i++) {
header.push(table.rows[0].cells[i].innerHTML);
}
for (var i = 1; i < table.rows.length; i++) {
var row = {};
for (var j = 0; j < table.rows[i].cells.length; j++) {
row[header[j]] = table.rows[i].cells[j].innerHTML;
}
rows.push(row);
}
alert(JSON.stringify(rows));
}
</script>
</body>
</html>
Conclusion: In above code, I have been explained how to convert HTML Table data to JSON using JavaScript. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.
Thanks and Regards
Using ASP.Net
Comments
Post a Comment