How to render dynamic table without knowing the data? using HTML and JS

Question

By dynamic I mean that I don't know what is the data returned from the ajax response. I managed to return {name:"" value:""} pair for some leverage.

sample data:

[
  [
    {
      "name": "_id",
      "value": "5a32391133425e1f5436161b"
    },
    {
      "name": "Issue",
      "value": "Splash Screen Animations"
    },
    {
      "name": "Status",
      "value": "Done"
    },
    {
      "name": "Comment",
      "value": "The animation must be the same as ios"
    }
  ],
  [
    {
      "name": "_id",
      "value": "5a32391133425e1f5436161c"
    },
    {
      "name": "Issue",
      "value": "Live Streaming Title and Image"
    },
    {
      "name": "Status",
      "value": "Done"
    },
    {
      "name": "Comment",
      "value": "asdasd"
    }
  ],
]

So How to render these data in a table or handlebars template? . knowing that the name should be in <thead> and the value should be in <tbody>

I also managed to separate the response data into separate arrays (headers, and data) so I can render the table as following.

<script type="text/html" id="ViewDataTemplate">
    <table class="table table-hover">
        <thead>
            <tr>
                {{#each headers}}
                <th>{{this}}</th>
                {{/each}}
            </tr>
        </thead>
        <tbody>
            {{#each data}}
            <tr>
                {{#each this}}
                    <td>{{this}}</td>
                {{/each}}
            </tr>
            {{/each}}
        </tbody>
    </table>
</script>

Please note : that the answer that I'm looking for is not specific to handlebars, html/js should be enough.

Answer 1

You have not shown us what your separated data looks like ( headers and data ), but it is quite possible that you could get the result you want simply by adding the missing .value reference within your body cell output:

{{#each this}}
    <td>{{this.value}}</td>
{{/each}}

That approach can work, but it makes some assumptions about the structure of your data. Most importantly, it assumes that each row object has the exact same properties and that the property objects are always in the same order ("_id", "Issue", "Status", "Comment").

If you are that confident in the consistency of your data, then I wouldn't even bother with the separation of the data into headers and data . I would simply get the column headings from the first row object, render those, and then #each over the entire data array to render the body. The template would be:

<table class="table table-hover">
    <thead>
        <tr>
            {{#each (lookup this 0)}}
                <th>{{this.name}}</th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{#each this}}
            <tr>
                {{#each this}}
                    <td>{{this.value}}</td>
                {{/each}}
            </tr>
        {{/each}}
    </tbody>
</table>

The only interesting part of this template is the use of the lookup helper. This is used to get us just the first array in our data object - the first "row" - which we use to populate our column headings.

Again, this will work only if your data is structured so that each row has the same columns object and those objects are in the same order. If your data is less predictable, then a more involved solution is required. I can provide that if necessary.

I have created a fiddle for your reference.