javascript – Create HTML table using multilevel JSON data
I am using jquery with HTML and I need to do a table HTML using JSON data.
It would be simple if JSON didn’t have multilevels and I need to make the resource flexible to support any JSON.
I’ve seen some examples using lists, but in my case I only need to use objects
Examples:
JSON Data:
{
"A":
{
"B":
{
"B1":"B1-a",
"B2": "B2-a"
},
"C":
{
"Ca":"Cb"
}
},
"D":
{
"E":
{
"E1":"E1-a",
"E2":"E2-a"
},
"F":
{
"Fa":"Fb"
}
}
}
Table HTML:
<table>
<tbody id="JSONTable">
<tr>
<td rowspan="5">A</td>
</tr>
<tr>
<td rowspan="3">B</td>
</tr>
<tr>
<td>B1</td>
<td>B1-a</td>
</tr>
<tr>
<td>B2</td>
<td>B2-a</td>
</tr>
<tr>
<td>C</td>
<td>Ca</td>
<td>Cb</td>
</tr>
<tr>
<td rowspan="5">D</td>
</tr>
<tr>
<td rowspan="3">E</td>
</tr>
<tr>
<td>E1</td>
<td>E1-a</td>
</tr>
<tr>
<td>E2</td>
<td>E2-a</td>
</tr>
<tr>
<td>F</td>
<td>Fa</td>
<td>Fb</td>
</tr>
</tbody>
Read more here: Source link