Convert HTML Table data Into JSON With jQuery and Javascript.How?
Congratulations you are a real explorer
Friends, I am going to show you how to Convert HTML Table data Into JSON With jQuery and Javascript.
HTML table and it's converted JSON data is shown below
Script to convert HTML data to JSON
Friends, I am going to show you how to Convert HTML Table data Into JSON With jQuery and Javascript.
HTML table and it's converted JSON data is shown below
Technologies used:
- HTML
- Bootstrap
- CSS
- Javascript
HTML page - Source code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#knf-users {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#knf-users td, #knf-users th {
border: 1px solid #ddd;
padding: 8px;
}
#knf-users tr:nth-child(even){background-color: #f2f2f2;}
#knf-users tr:hover {background-color: #ddd;}
#knf-users th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #800080;
color: white;
}
</style>
</head>
<body>
<div class="container">
<table class="table" id="knf-users">
<thead>
<tr>
<th>User Name</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tr>
<td>Sibin</td>
<td>knowledgefactory4upeoples@gmail.com</td>
<td>India</td>
</tr>
<tr>
<td>Safin</td>
<td>Safin@gmail.com</td>
<td>Germany</td>
</tr>
<tr>
<td>Chinju</td>
<td>chinju@gmail.com</td>
<td>Japan</td>
</tr>
<tr>
<td>Rahul</td>
<td>Rahul@gmail.com</td>
<td>Austria</td>
</tr>
<tr>
<td>Arnold</td>
<td>Arnold@gmail.com</td>
<td>UK</td>
</tr>
<tr>
<td>Esthar</td>
<td>Esthar@gmail.com</td>
<td>Germany</td>
</tr>
<tr>
<td>Azizi</td>
<td>Azizi@gmail.com</td>
<td>UAE</td>
</tr>
<tr>
<td>Mizolini</td>
<td>Mizolini@gmail.com</td>
<td>Italy</td>
</tr>
</table>
<div class="form-group">
<label for="comment">JSON view:</label>
<textarea id="out-put"class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
</body>
</html>
Script to convert HTML data to JSON
var myRows = { myRows: [] };
var $th = $('table th');
$('table tbody tr').each(function(i, tr){
var obj = {}, $tds = $(tr).find('td');
$th.each(function(index, th){
obj[$(th).text()] = $tds.eq(index).text();
});
myRows.myRows.push(obj);
});
//alert(JSON.stringify(myRows));
$('#out-put').html(JSON.stringify(myRows));
var $th = $('table th');
$('table tbody tr').each(function(i, tr){
var obj = {}, $tds = $(tr).find('td');
$th.each(function(index, th){
obj[$(th).text()] = $tds.eq(index).text();
});
myRows.myRows.push(obj);
});
//alert(JSON.stringify(myRows));
$('#out-put').html(JSON.stringify(myRows));
