使用javascript从jsondata.json文件填充html表[重复]

Posted 2023-03-05

【中文标题】使用javascript从jsondata.json文件填充html表[重复]

【英文标题】：Populate html table from a jsondata.json file using javascript [duplicate]

【发布时间】：2013-11-04 11:13:51

【问题描述】：

我是 javascript 和 jQuery 的新手。我已经加载了一个JsonData.json 文件。当用户单击按钮时，我需要帮助循环所有数据并将其显示在 html 表中。

<script>
    var a = ;
    $.getJSON('JsonData.json', function (data) 
        a = data;
    );
</script>

我的表结构如下：

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>IDNumber</th>
    </tr>
</table>

我的“JsonData.json”文件结构如下：

[
    
        "ID": 1,
        "Name": "John Smith",
        "IDNumber": "7606015012088"
    ,
    
        "ID": 2,
        "Name": "Molly Malone",
        "IDNumber": "8606125033087"
    ,
    
        "ID": 3,
        "Name": "Rianna Chetty",
        "IDNumber": "6207145122087"
    ,
    
        "ID": 4,
        "Name": "Gregory Nazul",
        "IDNumber": "8112125042088"
    ,
    
        "ID": 5,
        "Name": "Mary Billat",
        "IDNumber": "9103317012087"
    ,
    
        "ID": 6,
        "Name": "Harry Popadopalous",
        "IDNumber": "7206085031088"
    ,
    
        "ID": 7,
        "Name": "Jim Beam",
        "IDNumber": "5101236012088"
    
]

【问题讨论】：

jsonData.json 文件的内容是什么样的？

在提出重复问题之前请自行研究。

【参考方案1】：

你可以使用类似的东西：

     <script>
            var a = ;
            $.getJSON('JsonData.json', function (data) 
                a = data;

    $.each(a, function(idx, elem)
    $('table#tbl TBODY').append('<tr><td>'+elem.ID+'</td><td>'+elem.Name +'</td><td>'+elem.IDNumber +'</td></tr>');
    );
                );

         </script>

<table id="tbl">
<thead><tr><th>ID</th><th>Name</th><th>IDNumber</th></tr></thead>
<tbody></tbody>
</table>