Javascript Table from JSON Object

Question

I've created a simple function to return a table from a json object. I'm sure that my code can be improved so that the first line isn't required to be blank and wondered if someone could help with this.

My function does not require jQuery and I would prefer to use native javascript for this implementation.

<!DOCTYPE html>
<html>
<head>
<title>JSON Table</title>
<script>
function JSONtable(j,r){
    // requirement: first record should be blank
    var v = [];
    var k = [];
    var iv = [];
    var ik = [];
    var iiv = [];
    var iik = [];
    var t = '';
    var f = 0;
    var fi = 0;
    for (k in j) {
        if (k==r){
            t = '<table name="'+k+'">';
            v = j[k];
            for (ik in j[k]) {
                t = t+'<tr>';
                for (iik in j[k][ik]) {
                    if (f==0){
                        t = t+'<th>'+iik+'</th>';
                    }else{
                        t = t+'<td>'+j[k][ik][iik]+'</td>';
                    }
                    fi++;
                }
                f++;
                t = t+'</tr>';
            }
            t = t+'</table>';
        }
    }
    return t;
}
</script>
</head>
<body>
<script>
var j = {"employees":[{"firstName":"-blank-", "lastName":"-blank-", "link":"-blank-"},{"firstName":"John", "lastName":"Doe", "link":"<a href=\"#\">Link</a>"},{"firstName":"Anna", "lastName":"Smith", "link":"<a href=\"#\">Link</a>"},{"firstName":"Peter", "lastName":"Jones", "link":"<a href=\"#\">Link</a>"}]};
document.write(JSONtable(j,'employees'));
</script>
</body>
</html>

Result

<table name="employees">
    <tbody>
        <tr>
            <th>firstName</th>
            <th>lastName</th>
            <th>link</th>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td><a href="#">Link</a></td>
        </tr>
        <tr>
            <td>Anna</td>
            <td>Smith</td>
            <td><a href="#">Link</a></td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Jones</td>
            <td><a href="#">Link</a></td>
        </tr>
    </tbody>
</table>

New code that does not require a blank record

<!DOCTYPE html>
<html>
<head>
<title>JSON Table</title>
<script>
function JSONtable(j,r){
    var v = [];
    var k = [];
    var iv = [];
    var ik = [];
    var iiv = [];
    var iik = [];
    var t = '';
    var f = 0;
    for (k in j) {
        if (k==r){
            t = '<table name="'+k+'">';
            t = t+'<tr>';
            for (i of Object.keys(j[k][0])) {
                t = t+'<th>'+i+'</th>';
            }
            t = t+'</tr>';
            v = j[k];
            for (ik in j[k]) {
                t = t+'<tr>';
                for (iik in j[k][ik]) {
                    t = t+'<td>'+j[k][ik][iik]+'</td>';
                }
                f++;
                t = t+'</tr>';
            }
            t = t+'</table>';
        }
    }
    return t;
}
</script>
</head>
<body>
<script>
var j = {"employees":[{"firstName":"John", "lastName":"Doe", "link":"<a href=\"#\">Link</a>"},{"firstName":"Anna", "lastName":"Smith", "link":"<a href=\"#\">Link</a>"},{"firstName":"Peter", "lastName":"Jones", "link":"<a href=\"#\">Link</a>"}]};
document.write(JSONtable(j,'employees'));
</script>
</body>
</html>

Answer 1

Use Object.keys to get the names of the array keys and build the headers first. Then cycle through the rest of the list.

<title>JSON Table</title>
<script>
function JSONtable(j,r){
    // requirement: first record should be blank
    var v = [];
    var k = Object.keys(j)[0];
    var iv = [];
    var ik = [];
    var iiv = [];
    var iik = [];
    var t = '';
    var f = 0;
    var fi = 0;

    if (k === r) {
        t = '<table name="'+k+'">';
        t = t+'<tr>';
        for (i of Object.keys(j[k][0])) {
            t = t+'<th>'+i+'</th>';
        }
        t = t+'</tr>';

        for (k in j) {
            v = j[k];
            for (ik in j[k]) {
                t = t+'<tr>';
                for (iik in j[k][ik]) {
                    t = t+'<td>'+j[k][ik][iik]+'</td>';
                    fi++;
                }
                f++;
                t = t+'</tr>';
           }

        }
        t = t+'</table>';
    }
    return t;
}
</script>
<body>
<script>
    var j = {"employees":[{"firstName":"John", "lastName":"Doe", "link":"<a href=\"#\">Link</a>"},{"firstName":"Anna", "lastName":"Smith", "link":"<a href=\"#\">Link</a>"},{"firstName":"Peter", "lastName":"Jones", "link":"<a href=\"#\">Link</a>"}]};
    document.write(JSONtable(j,'employees'));
</script>

Javascript Table from JSON Object

Question

1 answers

solution1
1 ACCPTED 2016-01-29 17:19:34

Javascript Table from JSON Object

Question

1 answers

solution1 1 ACCPTED 2016-01-29 17:19:34

solution1
1 ACCPTED 2016-01-29 17:19:34