CODEWITHSUNDEEP
javascriptjsonhandlebars.js
Hugolpz
Hugolpz

Reputation: 18278

HandlebarsJS : Get elements i of each array, then element j, etc.?

Given a JSON such :

{
"network": 
   [
    { "name": [ "John",   "Jill",  "June"  ] },
    { "town": [ "London", "Paris", "Tokyo" ] },
    { "age" : [ "35",     "24",    "14"    ] }
   ]
}

Sadly, my input data is in this format and I have to stick with this.

Looking for a final HTML result such :

<ul>
<li>John, London, is 35 years old.</li>
<li>Jill, Paris, is 24 years old.</li>
<li>June, Tokyo, is 14 years old.</li>
</ul>

( So it actually browse the JSON by index, kind of 0, then 1, then 2 :

<ul>
<li>{{name}}[0], {{town}}[0], is {{age}}[0] years old.</li>
<li>{{name}}[1], {{town}}[1], is {{age}}[1] years old.</li>
<li>{{name}}[2], {{town}}[2], is {{age}}[2] years old.</li>
</ul>

)

Is there a native way, using handlebarsJS, to do a template something such :

  {{#each network}}<li>{{name}}[i], {{town}}[i], is {{age}}[i] years old.</li>{{/each}}

?

Upvotes: 0

Views: 122

Answers (2)

b_dubb
b_dubb

Reputation: 421

@Hugolpz, you'll want to restructure your data before you begin using your template. templates aren't supposed to contain any sort of 'intelligence'. templates are there for creating output.

<script>
    var original = { "network":[
        { "name": [ "John",   "Jill",  "June"  ] },
        { "town": [ "London", "Paris", "Tokyo" ] },
        { "age" : [ "35",     "24",    "14"    ] }
    ]}

    if(
        original.network[0]['name'].length != original.network[1]['town'].length && 
        original.network[0]['name'].length != original.network[2]['age'].length 
    ) {
        console.log( 'data is not uniform' );
        return false;
    } else {
        var dataLength = original.network[0]['name'].length;
    }

    var dataString = '{"users":[REPLACETHIS]}';
    var usersString = '';

    for( i=0; i < dataLength; i++ ){
        usersString+='{"name":"'+original.network[0]['name'][i]+'","town":"'+original.network[1]['town'][i]+'","age":"'+original.network[2]['age'][i]+'"}';
        if( i < dataLength-1 ){
            usersString+=',';
        }
    }

    dataString = dataString.replace('REPLACETHIS',usersString);
    data = $.parseJSON(dataString);
</script>

you can pass this restructured data to Handlebars for templating output

declare your template ... 

<script type="text/x-handlebars-template" id="user-tmpl">
{{#users}}
    <p>
        name : {{name}} <br />
        town : {{town}} <br />
        age : {{age}} <br />
    </p>
{{/users}}
</script>

and do your handlebar templating ... 

<script>
    var source = $('#user-tmpl').html();
    var bars = Handlebars.compile(source);
    $("#target").html(bars(data));
</script>

once you have your data structured in a way that's consistent with what you want to output everything becomes pretty simple

Upvotes: 1

Rummy
Rummy

Reputation: 103

You don't need the {{key}}[index], just {{key}}, #each [Object] already loops over the object and does that behind the scenes. .

Upvotes: 1

Related Questions