DzikiChrzan DzikiChrzan - 6 months ago 147
JSON Question

Table in dynatable prints rows of undefined

I installed dynatable plugin in my server and I wanted to create table from data written in JSON. My table with script:

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


And my
wszystkie_prace.json
file looks like this:

[
{
"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"
}
]


I'm following official documentation (https://www.dynatable.com/#existing-json), but all I get is set of
undefined
.

enter image description here

The number of rows is okay, but still I don't know how to deal with this problem.

Answer

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 (hadn'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