CODEWITHSUNDEEP
mustachedynamic-tables
Michael M
Michael M

Reputation: 8763

Dynamic tables with Mustache using dynamic arrays

I am wondering if there is a more graceful solution to my current solution for the following problem

Problem: Generate dynamic tables from a dynamic array with Mustache given that:

  1. Total column count is unknown
  2. Only one or two column names are known and must be rendered conditionally
  3. Helper functions may not be used
  4. Data is only provided in arrays. Not model classes

Typical data-set with variable column count where ID is the only column know to always be provided:

[id*]   [Col-1]    [Col-2]    [Col-3]   ...(more)
 1      'Foo'      'Bar'      'Baz'    ...(more)
 2      'Foo'      'Bar'      'Baz'    ...(more)
 3      'Foo'      'Bar'      'Baz'    ...(more)
 ...
(more)

Current Solution: Mix variating key names with constant key name In this example below, the variating keys are based on the various column names provided dynamically from the datasource which are ("id"; "name"; "legal_name"; "email"; "signon_email"; "editable") and the constant key name is "field"

Sample array:

array (size=6)
  0 => 
    array (size=2)
      'id' => string '10' (length=2)
      'field' => string 'id' (length=2)
  1 => 
    array (size=2)
      'value' => string 'J. Doe' (length=8)
      'field' => string 'name' (length=8)
  2 => 
    array (size=2)
      'value' => string 'Jane Doe' (length=8)
      'field' => string 'legal_name' (length=8)
  3 => 
    array (size=2)
      'value' => string '[email protected]' (length=12)
      'field' => string 'email' (length=12)


array (size=6)
  0 => 
    array (size=2)
      'id' => string '11' (length=2)
      'field' => string 'id' (length=2)
  1 => 
    array (size=2)
      'value' => string 'Jon Doe' (length=8)
      'field' => string 'name' (length=8)
  2 => 
    array (size=2)
      'value' => string 'John Doe' (length=8)
      'field' => string 'legal_name' (length=8)
  3 => 
    array (size=2)
      'value' => string '[email protected]' (length=12)
      'field' => string 'email' (length=12)

Template:

{{#rows}}
    <tr>{{#fields}}
            <td>{{#id}}<a href="foo/{{id}}">{{id}}</a>{{/id}}
                {{^id}}{{field}}: {{value} {{/id}}
            </td>
        {{/fields}}
    </tr>
{{/rows}}

Result:

<tr>
        <td><a href="foo/10">10</a></td>
        <td>name: J Doe</td>
        <td>legal_name: Jane Doe</td>
        <td>email: [email protected]</td>
</tr>
<tr>
        <td><a href="foo/11">11</a></td>
        <td>name: Jon Doe</td>
        <td>legal_name: John Doe</td>
        <td>email: [email protected]</td>
</tr>

Redundancy of data is not a concern since the data-sets are really small. Most importantly we want a language neutral solution (no lambdas).

Upvotes: 4

Views: 2868

Answers (1)

Jhonatan Pereira
Jhonatan Pereira

Reputation: 137

Many people can found this question about dynamic row in Mustache. So, I'll post my solution. Maybe useful to somebody.

Template one (table)

<script type="text/template" id="template-table">
     <table class="table table-responsive">
        {{{dynamicRow}}}
     </table>
</script>

Templete two (row of table)

<script type="text/template" id="template-table-row">
    <tr>
    <td>{{disciplina}}</td>
    <td>{{nota}}</td>
    </tr>
</script>

There's a Ajax response solution (jQuery):

var row = [], $item_row = {};

//iterator for rows
$.each(response.notas, function(){
    $item_row.disciplina = this.disciplina;
    $item_row.nota = this.nota;

    var $template = $("#template-table-row").html();
    row.push(Mustache.render($template, $item_row));
});

//var row contain all rows, so add it to table
var item = {
    dynamicRow: row
}
var $template = $("#template-table").html();
var output = Mustache.render($template, item);

alert("Finish. Result is on Console");
console.log(output);

Hope this helps.

Upvotes: 1

Related Questions