来自 JSON 对象的 Javascript 表

Javascript Table from JSON Object

本文关键字：Javascript 对象 JSON 来自      更新时间：2023-09-26

我创建了一个简单的函数来从json对象返回表。我确信我的代码可以改进，以便第一行不需要为空白，并想知道是否有人可以帮助解决这个问题。

我的函数不需要jQuery，我更喜欢使用本机javascript来实现此实现。

<!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>

结果

<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>

不需要空白记录的新代码

<!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>

使用 Object.keys 获取数组键的名称并首先构建标头。然后循环浏览列表的其余部分。

<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>

相关文章：