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