Use JSON to construct a table using JavaScript and HTML

function CreateTableFromJSON() {
    var myPersons = [{
        "A": {
            "name": "MAK",
            "height": 170,
            "place": "Canada"
        },
        "B": {
            "name": "Jak",
            "height": 164,
            "place": "JAPAN"
        },
        "C": {
            "name": "TAKO",
            "height": 152,
            "place": "ROMANIA"
        },
        "D": {
            "name": "NARO",
            "height": 192,
            "place": "Portugal"
        },
        "E": {
            "name": "Monako",
            "height": 138,
            "place": "Poland"
        }
    }]
    // EXTRACT VALUE FOR HTML HEADER. 
    // ('name', 'height', and 'place')
    var col = [];
    for (var i = 0; i < myPersons.length; i++) {
        for (var key in myPersons[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1);                   // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < myPersons.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myPersons[i][col[j]];
        }
    }

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}