Loop on Dust js to iterate through array

Question

I want to iterate through array file_url and file_name , this way works:

                     <div class="u-cf">
                        <a href="{Api.file_url[0]}">{Api.file_name[0]}</a> <br>
                        <a href="{Api.file_url[1]}">{Api.file_name[1]}</a> 
                 </div> 

But i need this one to do it with loop

      {#Api.file_name}
       {#.}

        <a href="{$file_url}">{$file_name}</a>{.} <br>

      {/.}
      {/Api.file_name}

I need to do it like this, but it shows only the file_name because it referees to the Api.file_name, if i do Api.file_url it shows the url only. I want to show both of them

Answer 1

Hope your data looks like below:

{
   names: ["file_name0", "file_name1"],
   url: ["http://www.dustjs.com/", "http://www.google.com/"]
}

you need helper to load two different data on same element like below:

var base = '{#names}\
<a href={#loadSecondArray i=$idx}{ele}{/loadSecondArray}> {.} </a><br/>\{~n}\
{/names}'

var baseCompiled = dust.compile(base, 'base');
dust.loadSource(baseCompiled);
var jsonData = {
    names: ["file_name0", "file_name1"],
    url: ["http://www.dustjs.com/", "http://www.google.com/"],
    loadSecondArray: function (c,ctx,b,p) {
        var array2 = ctx.get('url');
        var ele = array2[p.i]
        var ctx_new = dust.makeBase({
            ele:ele
        })
c.render(b.block, ctx_new)
    }
}
var result = '';
dust.render('base', jsonData, function (err, out) {
    result = out;
});

document.querySelector("#container").innerHTML = result;

working fiddle