Search code examples
javascriptjsondust.js

Is it possible to have the DUST template loop and interleave elements from two different arrays?

I am trying to create a template page in Dust, of a table that showing both a delta_time and an elapsed_time in one cell of a table. The data for the delta_time and the elapsed_times are both held in separate arrays.

The problem I have is that I cant find if it is possible to access another array context from within a different array context in the dust template.

The JSON data for the page is...

{
"state": {
    "objects": [
        {
            "id": "1",
            "Objectcolour": "#0000FF",
            "delta_times": [0, 7600, 8000, 35400, -300, -260],
            "elapsed_times": [1384342615000, 1384342622600, 1384342630600, 1384342666000, 1384342669000, 1384342671600]
        },
        {
            "id": "2",
            "Objectcolour": "#00FF00",
            "delta_times": [0, 7600, 8000, 35400, -300, -260],
            "elapsed_times": [1384342615000, 1384342622600, 1384342630600, 1384342666000, 1384342669000, 1384342671600]
        }
    ]
}

}

the Dust template is currently...

    {#state.objects}
<table>
    <tr>
        <th>ID</th>
        {#distances}
        <th>{split_distances}</th>
        {/distances}
    </tr>
    <tr>
        <th>{id}</th>
        {#elapsed_times}
        <th>{.}
    --Need to add some way to access {#delta_times} here!
                       </th>
        {/elapsed_times}

    </tr>
</table>
    {/state.objects}

I would like the final table to look like this

<table>
<tr>
    <th> ID </th>
    <th> 0m </th>
    <th> 10m </th>
    <th> 20m </th>
    <th> 30m </th>
    <th> 40m </th>
    <th> 50m </th>
</tr>

<tr>
    <th> 1 </th>
    <th> 11:36:55.0, </th>
    <th> 11:37:02.6, + 7.6</th>
    <th> 11:37:10.6, + 8.0 </th>
    <th> 11:37:46.0, + 35.4</th>
    <th> 11:37:49.0, - 3.0</th>
    <th> 11:37:51.6, - 2.6 </th>        
</tr>
<tr>
    <th> 2 </th>
    <th> 11:36:55.0, </th>
    <th> 11:37:02.6, + 7.6</th>
    <th> 11:37:10.6, + 8.0 </th>
    <th> 11:37:46.0, + 35.4</th>
    <th> 11:37:49.0, - 3.0</th>
    <th> 11:37:51.6, - 2.6 </th>        
</tr>
</table>

I have cut back the sample code above to show just the problem, so I have removed all the Dust helpers for displaying the numbers correctly as well as some of the other JSON required to make this table.

At the moment the only way I can see to solve this is to remap the JSON code into a different structure, with the two arrays concatenated into one structure. Is there a way to solve this within the Dust template? Thanks.

Solution

  • Adding this code in at your comment solves the problem by comparing the indices of the two arrays. When the indices are equal, the split is output.

    {#delta_times i=$idx}
  {@eq key=$idx value=i}+ {.}{/eq}
{/delta_times}

    However this is ugly, and you would, in my opinion, be much better served by writing a small Dust context helper to do this comparison and output for you. This keeps your template lightweight and very understandable.