Creating table with Mustache JS

Question

I've just started to learn about Mustache, but I don't understand how can I do this:

• I have this JSON object :

   var columnsDefinition = {
  
      "columns": [
            {
                "header": 'First name',
                "values": ['John', 'Jack', 'Abe', 'Adelle', 'Jim', 'Andrew', 'Matthew'],
                "type": 'text'
            },
            {
                "header": 'Last name',
                "values": ['Carpenter', 'Reaper', 'Lincoln', 'Aidan', 'Raynor', 'Doe'],
                "type": 'text'
            },
            {
                "header": 'Profession',
                "values": ['butcher', 'doctor', 'farmer', '', 'pilot', 'singer', ''],
                "type": 'select'
            },
            {
                "header": 'Employed',
                "values": [true, false, true, true, false],
                "type": 'checkbox'
            }
      ],
      "search": true
  };
  

• I want to create this :

This is what I've tried, but I don't know how to put values on each column, not on each row.

    this.testDiv = $("#testDiv");


    this.header = "{{#columns}}<th>{{header}}</th>{{/columns}}";

    this.body = "{{#columns}}<tr>{{#values}}<td>{{.}}</td><{{/values}}/tr>{{/columns}}";


    this.html = Mustache.to_html(this.header, this.columnsDefinition);

    this.html2 = Mustache.to_html(this.body, this.columnsDefinition);

    $("#testDiv table thead tr").append(this.html);

    $("#testDiv table tbody").append(this.html2);

How can I create the table above? Thank you.

Answer 1

I don't believe this can be done out of the box.

If you can't modify the JSON object that you currently have, you're better off generating another JSON object that will pivot the data and feed that one to Mustache.