javascriptarraysjsontempo

How to display a multi dimensional array as a table?


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.


Solution

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