Last active
October 9, 2024 06:06
-
-
Save johannesjo/6b11ef072a0cb467cc93a885b5a1c19f to your computer and use it in GitHub Desktop.
Snippet to convert html table to json (to be used with google chrome or similiar)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function tableToJson(table) { | |
var data = []; | |
// first row needs to be headers | |
var headers = []; | |
for (var i=0; i<table.rows[0].cells.length; i++) { | |
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,''); | |
} | |
// go through cells | |
for (var i=1; i<table.rows.length; i++) { | |
var tableRow = table.rows[i]; | |
var rowData = {}; | |
for (var j=0; j<tableRow.cells.length; j++) { | |
rowData[ headers[j] ] = tableRow.cells[j].innerHTML; | |
} | |
data.push(rowData); | |
} | |
return data; | |
} | |
JSON.stringify(tableToJson($0)); |
And another variant that supports custom headers:
function tableToJson(table, headers = []) {
var data = [];
// first row needs to be headers
if(!headers.length) {
for (var i = 0; i < table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
}
}
// go through cells
for (var i = 1; i < table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j = 0; j < tableRow.cells.length; j++) {
rowData[headers[j]] = tableRow.cells[j].innerHTML;
}
data.push(rowData);
}
return data;
}
JSON.stringify(tableToJson(document.getElementsByTagName("table")[0], ["nr", "title", "description"]));
joining the party,
function tableToObject(table) {
let trs = table.querySelectorAll('tr');
let headers = Array.from(trs[0].querySelectorAll('th')).map(th => th.textContent.trim());
let ret = [];
for (let i = 1; i < trs.length; i++) {
let obj = {};
let tds = trs[i].querySelectorAll('td');
for (let j = 0; j < tds.length; j++) {
obj[headers[j]] = tds[j].textContent.trim();
}
ret.push(obj);
}
return ret;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very nice example, but only works on tables that we are expecting to correctly have used a table with th cells.
If we are expecting a table to have a "header row" but it does not use th cells for this we need to update the code.
Using @GavinRay97's original example this enhances it to work with tables where we aren't sure if they will have th cells.
Usage:
parseHTMLTableElem(document.getElementById('first-table'), false OR true);
Return:
{'headers: [], 'rows':[]}