xxxxxxxxxx
function htmlTableToJson(tableId) {
var table = document.getElementById(tableId);
var data = [];
// Iterate through each row in the table
for (var i = 0; i < table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
// Iterate through each cell in the row
for (var j = 0; j < tableRow.cells.length; j++) {
var tableCell = tableRow.cells[j];
var cellData = tableCell.innerText;
// Use the first row as keys for the JSON object
if (i === 0) {
rowData['header_' + j] = cellData.trim();
} else {
var headerCell = table.rows[0].cells[j];
var headerKey = headerCell.innerText.trim(); // Assuming the header is in the first row
// Store cell data with corresponding header key
rowData[headerKey] = cellData.trim();
}
}
if (i !== 0) {
data.push(rowData);
}
}
return JSON.stringify(data);
}
// Example usage: Convert table with id 'myTable' to JSON
var jsonResult = htmlTableToJson('myTable');
console.log(jsonResult);
xxxxxxxxxx
var _table_ = document.createElement('table'),
_tr_ = document.createElement('tr'),
_th_ = document.createElement('th'),
_td_ = document.createElement('td');
// Builds the HTML Table out of myList json data from Ivy restful service.
function buildHtmlTable(arr) {
var table = _table_.cloneNode(false),
columns = addAllColumnHeaders(arr, table);
for (var i = 0, maxi = arr.length; i < maxi; ++i) {
var tr = _tr_.cloneNode(false);
for (var j = 0, maxj = columns.length; j < maxj; ++j) {
var td = _td_.cloneNode(false);
cellValue = arr[i][columns[j]];
td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
tr.appendChild(td);
}
table.appendChild(tr);
}
return table;
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(arr, table) {
var columnSet = [],
tr = _tr_.cloneNode(false);
for (var i = 0, l = arr.length; i < l; i++) {
for (var key in arr[i]) {
if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
columnSet.push(key);
var th = _th_.cloneNode(false);
th.appendChild(document.createTextNode(key));
tr.appendChild(th);
}
}
}
table.appendChild(tr);
return columnSet;
}
document.body.appendChild(buildHtmlTable([{
"name": "abc",
"age": 50
},
{
"age": "25",
"hobby": "swimming"
},
{
"name": "xyz",
"hobby": "programming"
}
]));
xxxxxxxxxx
var myList = [
{ "name": "abc", "age": 50 },
{ "age": "25", "hobby": "swimming" },
{ "name": "xyz", "hobby": "programming" }
];
// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
var columns = addAllColumnHeaders(myList, selector);
for (var i = 0; i < myList.length; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) cellValue = "";
row$.append($('<td/>').html(cellValue));
}
$(selector).append(row$);
}
}
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records.
function addAllColumnHeaders(myList, selector) {
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
var rowHash = myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$(selector).append(headerTr$);
return columnSet;
}
xxxxxxxxxx
// Assuming you have JSON data stored in a variable called jsonData
var jsonData = [
{ "id": 1, "name": "John", "age": 30 },
{ "id": 2, "name": "Jane", "age": 28 },
{ "id": 3, "name": "Bob", "age": 35 }
];
// Create the HTML table structure dynamically using the JSON data
var tableHtml = '<table><thead><tr>';
// Get the column headers from the first object in the JSON data
var headers = Object.keys(jsonData[0]);
// Add column headers to the table
headers.forEach(function(header) {
tableHtml += '<th>' + header + '</th>';
});
tableHtml += '</tr></thead><tbody>';
// Add the data rows to the table
jsonData.forEach(function(row) {
tableHtml += '<tr>';
// Add cells for each column in the current row
headers.forEach(function(header) {
tableHtml += '<td>' + row[header] + '</td>';
});
tableHtml += '</tr>';
});
tableHtml += '</tbody></table>';
// Now you can use the 'tableHtml' string as HTML content in your page or wherever needed
console.log(tableHtml);
xxxxxxxxxx
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="buildHtmlTable('#excelDataTable')">
<table id="excelDataTable" border="1">
</table>
</body>
xxxxxxxxxx
Convert JSON to HTML Table
Step 1: Select your input. Option 1 - Choose JSON file Encoding. Option 2 - Enter an URL.
Step 2: Choose output options (optional) Output Field Separator: , ; : Bar-| Tab Other-Choose. Include header in first row.
Step 3: Generate output. Result Data: Save your result: .htm Download Result EOL: