How To Render Dynamic Table Without Knowing The Data? Using Html And Js

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: [ [ {

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