如何将 JSON 文件拉入 HTML 表格？答案

【问题标题】：How to pull a JSON file into an HTML table?如何将 JSON 文件拉入 HTML 表格？
【发布时间】：2017-04-03 11:01:37
【问题描述】：

我看过一些关于此的帖子，但我无法使任何工作。我正在尝试将 JSON 文件中的数据提取到 HTML 表中。我试图遵循的每篇文章都没有带回任何东西，所以我不知道这些功能是否正常工作，我只是没有把它们拉到正确的地方，或者它们是否都是错误的。所以，这是我的 JSON 文件：

    {
"Parts": [
        {
         "CIMs":17748, 
         "Name":"Bizerba XC100 Printer", 
         "Description":"Bizerba XC100 Print Assembly",
         "Category":"Scales",
         "Location": "Shelf 1",
         "Amount": 3
         },
        {
          "CIMs":17738,
          "Name": "Bizerba XC100 Spool",
          "Description":"Bizerba XC100 Label Spool",
          "Category":"Scales",
          "Location": "Shelf 1",
          "Amount":4
          },
        {
         "CIMs":12345,
         "Name":"Lexmark MS711de",
         "Description": "Lexmark MS711de for FMC and ICC",
         "Category":"Printers",
         "Location":"Crash Site",
         "Amount":1
         },
        {
         "CIMs":23456,
         "Name":"Bill Acceptor",
         "Description":"Bill Acceptor for SCO 4.2 and 5.0",
         "Category":"SCO",
         "Location":"Shelf 2",
         "Amount":4
         },
        {
         "CIMs":34567,
         "Name": "TCU",
         "Description":"TCU for nextgen registers",
         "Category":"Registers",
         "Location":"Shelf 2",
         "Amount":2
         },
        {
         "CIMs":45678,
         "Name":"HP Desktop",
         "Description":"HP Desktop for use by everyone but managers",
         "Category":"Computers",
         "Locaton":"Shelf 2",
         "Amount":2
         },
        {
         "CIMs":56789,
         "Name":"HP DL160 HDD",
         "Description":"HP DL160 G6 160GB 2.5 inch replacement drive",
         "Category":"Servers",
         "Location":"Shelf2",
         "Amount":6
         }
    ]}

这是我设置的脚本：

    <script>
    $(function(){
var partsList = [];
$.getJSON('partslist.json', function(json){
    $.each(json.properties, function(i, f) {
        var tblRow = "<tr>" + "<td>" + f.CIMs + "</td>" 
                + "<td>" + f.Name + "</td>"
                + "<td>" + f.Description + "</td>"
                + "<td>" + f.Category + "</td>"
                + "<td>" + f.Location + "</td>"
                + "<td>" + f.Amount + "</td>" + "</tr>";
        $(tblRow).appendTo("#partsListData tbody");
    });
});
    }); </script>

我的桌子：

                <section>
            <h2>Parts</h2>
            <table id="partsListData" border="1">
                 <thead>
                    <th>CIMs</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Category</th>
                    <th>Location</th>
                    <th>Amount</th>
                </thead>
              <tbody>
               </tbody>
            </table>
            <p><a href="#" style="color: black; align-content: center;">Add Parts</a></p>
            <p><a href="#" style="color: black; align-content: center;">List Categories</a></p>
        </section>

我错过了什么？我需要在我的网页中做什么才能实现拉动？我试过把脚本放在标签下面，也没有运气。帮忙？

编辑：我设法让表格显示标题，但数据返回未定义。我还将帖子中的代码更新为我目前拥有的代码。

【问题讨论】：

标签在哪里？
您是通过网络服务器执行此操作，而不仅仅是尝试读取本地 JSON 对吗？
嗯，两者兼而有之。我托管了一个网络服务器，并且我从同一个文件夹中运行这两个文件。我在我的系统上使用 XAMPP 来复制服务器设置。
我在脚本之前尝试了标记并在脚本之后结束了它，但它不起作用。如何用表格调用函数？

how to use json file in html code的可能重复