Question

我已经看过几篇关于此事的帖子，但我无法做任何事情。我正在尝试将数据从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>

我错过了什么？我需要在我的网页上做些什么才能实现这一目标？我已经尝试将脚本放在标签下面，也没有运气。帮助

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

Answer 1

我简化了我的json文件并按照A1raa linked我的文件最初不想更新的帖子，但在强制刷新页面后，数据开始显示。

如何将JSON文件拉入HTML表？

1 个答案: