29

i need to template with handlebars an array of json object:(by chrome console) [object,object,object,object] where every object is composed by this property:name,surname,ecc.

I've understood that is impossible to put array of object in handlebars but we must create an unique object with all property of all object of array. Can anyone suggest me a function to create it

Stefano Maglione
  • 3,946
  • 11
  • 49
  • 96

1 Answers1

95

You could set your array as a property of a wrapper object when calling the template.

For example, with objects as the holding property

var an_array = [
    {name: "My name"},
    {name: "Another name"}
];

var source   = /* a template source*/;
var template = Handlebars.compile(source);
var wrapper  = {objects: an_array};

console.log(template(wrapper));

and your template can use this property as follows:

<ul>
    {{#each objects}}
        <li>{{name}}</li>
    {{/each}}
</ul>

And a demo http://jsfiddle.net/YuvNY/1/

var an_array=[
    {name:"My name"},
    {name:"Another name"},    
];

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template({objects:an_array}) );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

<script type='text/template' id='src'>
<ul>
  {{#each objects}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>

Or you could pass directly the array to the template and call the each helper with the context set to . (a dot)

var template = Handlebars.compile(source);
console.log(template(an_array));

<ul>
    {{#each .}}
        <li>{{name}}</li>
    {{/each}}
</ul>

http://jsfiddle.net/nikoshr/YuvNY/32/

var an_array=[
    {name:"My name"},
    {name:"Another name"},    
];

var source   = $("#src").html();
var template = Handlebars.compile(source);
$("body").append( template(an_array) );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>

<script type='text/template' id='src'>
<ul>
  {{#each .}}
      <li>{{name}}</li>
  {{/each}}
</ul>    
</script>
nikoshr
  • 32,926
  • 33
  • 91
  • 105
  • @StefanoMaglione Could you set a fiddle to see what goes wrong? Mine could help you start up – nikoshr Jul 20 '12 at 20:40
  • 1
    Using a wrapper object tends to give your template a more legible context. Say you're dealing with an array of users: {{#each users}} is easier on the eyes than {{#each .}} – seePatCode May 16 '14 at 14:06
  • {{#each .}} is the best thing I have learned this week. Thanks @nikoshr – cheshireoctopus Aug 08 '14 at 16:40
  • Damn! I spent couple of hours experimenting with my external JSON and html templates; your "." (dot) helped since it was simple array in JSON file. Thanks a ton! – Adesh M Aug 24 '15 at 14:08
  • @nikoshr I tried to replicate your code with my JSON file, and it didn't worked. but the moment i removed `objects` from the last line like `$("body").append( template({objects:an_array}) );`, it worked. Can anyone tell, why ? – Deepak Yadav Jun 28 '16 at 14:08
  • @DeepakYadav I'm afraid I don't quite grasp what the problem is. Are you by any chance mixing the first version's call with the second version's template? If not, you probably will have to post a new question with what you use. – nikoshr Jun 28 '16 at 14:21
  • @nikoshr buddy, check this [codepen using Handlebars](http://codepen.io/happy2deepak/pen/OXgpzk?editors=1010) and check my template append section in JS file. – Deepak Yadav Jul 04 '16 at 12:41
  • @nikoshr Do you know any way to do something like `{{objects[0]}}`? – Sanjay Nishad Sep 30 '16 at 21:33
  • @SanjayNishad Check http://stackoverflow.com/questions/8044219/how-do-i-access-an-access-array-item-by-index-in-handlebars – nikoshr Oct 01 '16 at 08:25
  • 1
    Ugh, could not figure out how to get my array of objects to display, thrashed on it for a while before i found this answer. This solved it for me, taught me something too, thx @nikoshr – contractorwolf Feb 01 '18 at 02:36