JavaScript - Scrape HTML Table Into Its JavaScript Data-Object Representative

Posted at

sometimes you'll want to tweak an existing page, by injecting a javascript bookmark,
user-script (greasemonkey for example) or even plain console eval.

parsing a HTML table into a data-table representation can provide easier access to data and DOM-elements (for style modifications, for example..)

for the given html example:









# name title
1 Foo1 Bar1
2 Foo2 Bar2
3 Foo3 Bar3



var headers, rows, table;

headers = Array.prototype.map.call(document.getElementsByTagName('th'),function(element){
return element.innerText
.trim()
.replace("?", "").replace("?","");
});

rows = document.querySelectorAll('tr[class*="bz_bugitem"');

table = Array.prototype.map.call(rows, function(row){
var
columns_as_array = row.getElementsByTagName("td"),
columns_as_object = {},
i,
headers_len = headers.length
;

for(i=0; i<headers_len; i+=1){ //store by column order (zero-based-index)
columns_as_object[ i ] = columns_as_array[i]; //store by column order (zero-based-index)
}
columns_as_object[ "length" ] = columns_as_array.length; //fake "length" attribute just like it was a real array, the top X elements are "by number"


for(i=0; i<headers_len; i+=1){ //map row array to row object - store by column title
columns_as_object[ headers[i] ] = columns_as_array[i];
}

return columns_as_object;
});

console.log(headers);
console.log("\
");
console.log(table);