This problem's been haunting me for days... I have the following JSON that I'm trying to render as a table using Tempo.js but keep getting nothing rendered:
[
{
"id":"xxxxxxxxxxxxxxxxxxxxxxxxxx",
"name":"Family One",
"parents":[
{
"id":"yyyyyyyyyyyyyyyyyyyyyyyyyy",
"name":"John Doe",
"children":[
{
"id":"zzzzzzzzzzzzzzzzzzzzzzzzz",
"name":"Fabrice A",
"description":"Good kid",
"Age":"20",
"Weight":"60"
}
]
},
{
"id":"hhhhhhhhhhhhhhhhhhhhhhhhhh",
"name":"Jane Doe",
"children":[
{
"id":"wwwwwwwwwwwwwwwwwwwwwwww",
"name":"Maurice A",
"description":"Bad kid",
"Age":"22",
"Weight":"50"
}
]
}
]
},
{
"id":"xxxxxxxxxxxxxxxxxxxxxxxxxx2",
"name":"Family Two",
"parents":[
{
"id":"yyyyyyyyyyyyyyyyyyyyyyyyyy2",
"name":"Sonny Doe",
"children":[
{
"id":"zzzzzzzzzzzzzzzzzzzzzzzzz2",
"name":"Juan B",
"description":"Good kid",
"Age":"30",
"Weight":"70"
},
{
"id":"zzzzzzzzzzzzzzzzzzzzzzzzz3",
"name":"Alberto B",
"description":"Fine kid",
"Age":"20",
"Weight":"60"
},
{
"id":"zzzzzzzzzzzzzzzzzzzzzzzzz4",
"name":"Roberto B",
"description":"Medium kid",
"Age":"10",
"Weight":"50"
}
]
}
]
}
]
The table is supposed to look like this:
_______________________________________________________________________________________
| FAMILY NAME | PARENTS | CHILD NAME | CHILD DESCRIPTION | CHILD AGE | CHILD WEIGHT |
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
| Family One | John Doe | Fabrice A | Good kid | 20 | 60 |
| |''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
| | Jane Doe | Maurice A | Bad kid | 22 | 50 |
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
| Family Two | Sonny Doe | Juan B | Good kid | 30 | 70 |
| | | Alberto B | Fine kid | 20 | 60 |
| | | Roberto B | Medium kid | 10 | 50 |
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Please notice how the family cell stretches to house more than one parent rows, and the parent cell streches to house more than one children rows.
I prepare the JSON in js in a variable called familyTree, and then call Tempo.prepare('family-list').render(familyTree);
No I've read all of the documentation for tempo.js (which wasn't too long), but I still haven't found a way of rendering the table properly. Here's what I got so far:
<div id="family-list">
<table id="families">
<tr data-before-template='data-before-template'>
<th>
FAMILY NAME
</th>
<th>
PARENTS
</th>
<th>
CHILD NAME
</th>
<th>
CHILD DESCRIPTION
</th>
<th>
CHILD AGE
</th>
<th>
CHILD WEIGHT
</th>
</tr>
<tr data-template='data-template'>
<td id="family-column">
{{name}}
</td>
<td id="parent-column" data-template-for='parents'>
{{name}}
</td>
<td colspan="4">
<table id='children-table' data-template-for="children">
<tr>
<td>
{{name}}
</td>
<td>
{{description}}
</td>
<td>
{{age}}
</td>
<td>
{{weight}}
</td>
</tr>
</table>
</td>
</tr>
I've used tempo before. I've even mixed it with wkhtmltopdf to render some nice-looking pdf files. But I just cannot solve this. If any of you out there has been through anything similar..would you please share your experience? Thanks so much in advance.
Using tempo.js is not ideal to render hierarchical data in a table. To render hierarchical data, tempo.js requires that the HTML elements also exists in a hierarchy. This is not ideal when dealing with tables, because creatign a table inside a table cell will eventually lead to column alignment issues. You can take care of alignment issues to a certain degree by fixing the width of each column, but this will not be a perfect solution.
Having said above, I've fixed your HTML markup to render your JSON data using tempo.js. See the changes below (jsfiddle here):
<div id="family-list">
<table id="families">
<tr data-before-template='data-before-template'>
<th width="100px">
FAMILY NAME
</th>
<th width="100px">
PARENTS
</th>
<th width="100px">
CHILD NAME
</th>
<th width="150px">
CHILD DESCRIPTION
</th>
<th width="50px">
CHILD AGE
</th>
<th width="50px">
CHILD WEIGHT
</th>
</tr>
<tr data-template='data-template'>
<td id="family-column">
{{name}}
</td>
<td colspan="5">
<table cellpadding="0">
<tr data-template-for='parents'>
<td width="100px">
{{name}}
</td>
<td>
<table id='children-table' cellpadding="0">
<tr data-template-for="children">
<td width="100px">
{{name}}
</td>
<td width="150px">
{{description}}
</td>
<td width="50px">
{{Age}}
</td>
<td width="50px">
{{Weight}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>