Sometimes, we want to convert a table to JSON with JavaScript.
In this article, we’ll look at how to convert a table to JSON with JavaScript.
How to convert a table to JSON with JavaScript?
To convert a table to JSON with JavaScript, we can get the rows with with table.rows and the table header with table.tHead.
For instance, we write:
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</tbody>
</table>
to add a table.
Then we write:
const table = document.querySelector('table')
const [header] = table.tHead.rows
const props = [...header.cells].map(h => h.textContent)
const rows = [...table.rows].map(r => {
const entries = [...r.cells].map((c, i) => {
return [props[i], c.textContent]
})
return Object.fromEntries(entries)
})
console.log(rows)
to select the table with querySelector.
Next, we get the header row with
const [header] = table.tHead.rows
Next, we spread the header.cells into an array and get the textContent of each cell to get the property keys into an array and assign it to props.
Then we get the rows with table.rows and spread the entries into an array.
And then we call map with a callback to return the key and the textContent of the cell and put it into an array and return it.
Then we call Object.fromEntries with entries to return the object with the table row property keys and values.
Therefore, rows is
[{
Column 1: "Column 1",
Column 2: "Column 2",
Column 3: "Column 3"
}, {
Column 1: "A1",
Column 2: "A2",
Column 3: "A3"
}, {
Column 1: "B1",
Column 2: "B2",
Column 3: "B3"
}, {
Column 1: "C1",
Column 2: "C2",
Column 3: "C3"
}]
Conclusion
To convert a table to JSON with JavaScript, we can get the rows with with table.rows and the table header with table.tHead.
