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>

Is there actually a problem with your code? If not, Stack Overflow is not the right place to get feedback for your code. — Felix Kling
– Felix Kling, Commented Jan 29, 2016 at 16:58
try codereview.stackexchange.com if you want your code reviewed — depperm
– depperm, Commented Jan 29, 2016 at 17:00
the problem was clearly stated.. his function requires the first row to be blank he can't figure out how to do it without this requirement. gosh ppl are so picky. — I wrestled a bear once.
– I wrestled a bear once., Commented Jan 29, 2016 at 17:02

Quotidian · Accepted Answer · 2016-01-29 17:28:37Z

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>

Collectives™ on Stack Overflow

Javascript Table from JSON Object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related