Created
January 22, 2018 01:18
-
-
Save joshbuchea/2abc45150db447431778e1adf48bc982 to your computer and use it in GitHub Desktop.
HTML table data to JSON
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
/* | |
* THIS IS NOT A PLUGIN | |
* ~ but a personal snippet | |
* | |
* Sometimes when prototyping my designs, I like to get dummy data pretty fast. | |
* I use this snippet to extract that data from working (aka "real life") tables from other HTML tables I find on the net. | |
* So I'll need that same data but inside an object. | |
* | |
* This script assumes by default the table has the following structure: | |
* <table> | |
* <thead> | |
* <tr><th> | |
* <tbody> | |
* <tr><td> | |
*/ | |
var o = { // default options | |
selectors: { | |
table: 'table', | |
th: 'thead th', // relative to $table | |
tr: 'tbody tr' // relative to $table | |
} | |
}, | |
$table, | |
data = [], | |
headings = [], | |
log = console.log; | |
$table = document.querySelector(o.selectors.table); | |
// Get headings | |
$table.querySelectorAll(o.selectors.th).forEach((th) => { | |
headings[headings.length] = th.innerText; | |
}); | |
$table.querySelectorAll(o.selectors.tr).forEach((tr, row) => { | |
var obj = data[row] = {}; | |
tr.querySelectorAll('td').forEach((td, i) => { | |
obj[headings[i]] = td.innerText; | |
}) | |
}); | |
log(JSON.stringify(data)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment