javascript - 可动态化的表格打印未定义的行

Question

我在我的服务器中安装了 dynatable 插件，我想从用 JSON 编写的数据创建表。我的表与脚本：

<table class="table table-striped" id="local-json">
    <thead>
                                  <tr>
                                    <th>Status</th>
                                    <th>MPK</th>
                                    <th>Restaurant Name</th>
                                    <th>Phone Number</th>
                                    <th>Project Start Date</th>
                                    <th>Project End Sales Date</th>
                                    <th>Project Installation Date</th>
                                    <th>Project End Date</th>
                                    <th>General Manager</th>
                                    <th>IT Manager</th>
                                    <th>Edit</th>
                                  </tr>
                                </thead>
<tbody></tbody>
</table>

<script type="text/javascript">
$(document).ready(function(){
var json_url = 'wszystkie_prace.json';
$.getJSON(json_url, function(data) {
    $('#local-json').dynatable({
        dataset: {
            records: JSON.parse(JSON.stringify(data))
        }
    });
});
});
</script>

我的wszystkie_prace.json文件如下所示：

[
    {
        "Project Type": "Opening Restaurant",
        "MPK": "108006",
        "Old MPK": "234",
        "Restaurant Name": "PL SBX Restauracja Test1",
        "Phone Number": "+48111222333",
        "Project Start Date": "Apr  6 2016 10:00:00:000PM",
        "Project End Sales Date": "Apr  7 2016 10:00:00:000PM",
        "Project Installation Date": "Apr  6 2016 10:00:00:000PM",
        "Project End Date": "Apr  9 2016 10:00:00:000PM",
        "Restaurant Manager": "Zenon Pietrucha",
        "IT Manager": "Andrzej Marchewka",
        "Notes": "Notatka random sdijbwodenhwoidchwoncdown"
    },
    {
        "Project Type": "Closing Restaurant",
        "MPK": "103120",
        "Old MPK": "2134",
        "Restaurant Name": "PL KFC Restauracja Test2",
        "Phone Number": "+48123123123",
        "Project Start Date": "May  2 2016 06:00:00:000AM",
        "Project End Sales Date": "May  3 2016 08:00:00:000PM",
        "Project Installation Date": "May  7 2016 06:00:00:000AM",
        "Project End Date": "May  8 2016 06:00:00:000AM",
        "Restaurant Manager": "Tomasz Ziemniak",
        "IT Manager": "Andrzej Marchewka",
        "Notes": "sodicmwpd efvwefvwefv wefvwefv wefvwe fv ewfvwe\r\nfvwef\r\nvwe\r\nfv\r\nwefv\r\nwef"
    }
]

我正在关注官方文档（https://www.dynatable.com/#existing-json），但我得到的只是undefined.

行数还可以，但是还是不知道怎么处理这个问题。

Answer 1

Your code is alright you just have to change the naming style of key literals like Project Type etc. in your wszystkie_prace.json file ,dyntable follows camel casing for naming keys in json so when there is a single word it goes all in lowercase eg MKP as mkp, if it's multiword it should be written in camelCase eg.Project Type as projectType ,former is what you write in the tr tag inside th later is what correspondingly you write for the key in json

For reference

JSON

[{
    "projectType": "Opening Restaurant",
    "mpk": "108006",
    "oldMpk": "234",
    "restaurantName": "PL SBX Restauracja Test1",
    "phoneNumber": "+48111222333",
    "projectStartDate": "Apr  6 2016 10:00:00:000PM",
    "projectEndSalesDate": "Apr  7 2016 10:00:00:000PM",
    "projectInstallationDate": "Apr  6 2016 10:00:00:000PM",
    "projectEndDate": "Apr  9 2016 10:00:00:000PM",
    "restaurantManager": "Zenon Pietrucha",
    "itManager": "Andrzej Marchewka",
    "notes": "Notatka random sdijbwodenhwoidchwoncdown"
},

//more stuff for other rows

]

HTML

<table class="table table-striped" id="local-json">
<thead>
       <tr>
               <tr>Status</tr> <!--undefined since we didn't supply the value in json-->
               <th>Project Type</th>
               <th>MPK</th>
               <th>Restaurant Name</th>
               <th>Phone Number</th>
               <th>Project Start Date</th>
               <th>Project End Sales Date</th>
               <th>Project Installation Date</th>
               <th>Project End Date</th>
               <th>General Manager</th>
               <th>IT Manager</th>
               <th>Edit</th>
       </tr>
</thead>
<tbody></tbody>
</table>

UPDATE: Sorry i didn't knew (havn't used dynatable since a long time ) but it looks like there are now 4 more naming formats available .

I suggest you to use the lowercase format since i found it the most straightforward

change script to

<script type="text/javascript">
$(document).ready(function(){
var json_url = 'wszystkie_prace2.json';
$.getJSON(json_url, function(data) {
$('#local-json').dynatable({
   table: {
       defaultColumnIdStyle: 'lowercase'
   },

   dataset: {
          records: JSON.parse(JSON.stringify(data))
   }
});
});
});
</script>

new json

[
    {
    "project type": "Opening Restaurant",
    "mpk": "108006",
    "old mpk": "234",
    "restaurant name": "PL SBX Restauracja Test1",
    "phone number": "+48111222333",
    "project start date": "Apr  6 2016 10:00:00:000PM",
    "project end sales ate": "Apr  7 2016 10:00:00:000PM",
    "project installation date": "Apr  6 2016 10:00:00:000PM",
    "project end date": "Apr  9 2016 10:00:00:000PM",
    "restaurant manager": "Zenon Pietrucha",
    "it manager": "Andrzej Marchewka",
    "notes": "Notatka random sdijbwodenhwoidchwoncdown",
    "general manager" : "mr .cool",
    "status" : "Active"
    }
]

If willing to explore other naming formats https://www.dynatable.com/#converting-attribute-names