How to use HandleBars to output each element of an array inside a JSON object

Question

I'm trying to output the content of the following array inside the output JSON object:

let output = {
    out:[
    ]
};

I add stuff in the array by doing the following :

for (let j = 0; j < length ; j++){
output.out[j]= "stuff" + j;
}

And finally I try to output the content by using "each" call:

{{#each output.out}}
        {{this}}
        <br>
    {{/each}}

I would like to output the following if length=3:

stuff0
stuff1
stuff2

I don't receive any error but nothing gets outputted. Sorry for my clumsy English.

stuff in just a string. I'm gonna edit it for more precision — Mamoun Debbarh, Jun 25 '18 at 17:09
Why are you using output.out? output is the name of the variable you pass to the template and has nothing to do with the data. See the JSFiddle from this answer: https://stackoverflow.com/questions/22696886/how-to-iterate-over-array-of-objects-in-handlebars — Ignacy Debicki, Jun 25 '18 at 17:34
@IgnacyDebicki Thanks bro I'm checking it out. edit : I tried replacing output.out by just out but it still doesn't output anything — Mamoun Debbarh, Jun 25 '18 at 17:35

score 0 · Answer 1 · answered Jun 25 '18 at 18:35

Make sure you must pass object or data to your template.

Template:

<script id="example-template" type="text/x-handlebars-template"> 
    {{#each out}}
        {{this}}
        <br>
    {{/each}}
</script>

JavaScript:

var source = $("#example-template").html(); 
var template = Handlebars.compile(source); 
var output = {
    out:[
    ]
};
for (let j = 0; j < 10 ; j++){
     output.out[j]= "stuff" + j;
}
$('body').append(template(output));

score 0 · Accepted Answer · answered Jun 26 '18 at 12:10

The answer was just about declaring and defining everything right. I just did not define out[] array inside of my JSON object but instead, I defined in the function that would run the process like so:

let output = {
};

function do(){
  output.out = [];
    for (let j = 0; j < length ; j++){
      output.out[j]= "stuff" + j;
    }
}

And I replace output.out by just out in the handlebars part. It works. I understand that In my case, the object got re-written and messed up everything.

How to use HandleBars to output each element of an array inside a JSON object

2 Answers2