CODEWITHSUNDEEP
javascriptjqueryjsonhandlebars.jstemplating
QuikProBroNa
QuikProBroNa

Reputation: 816

Looping through an array of json objects

So, I have this web app in which I am using hbs as the templating engine. Now, from my rest API I am sending over an array of JSON objects:

 [{";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}]

I have a variable: disklist, that has this data.

Using handlebars this is what I have tried so far, but it does not seem to work. 

  console.log(disklist[0].name); // LOGS THE NAME PROPERLY

  var source   = $("#dlist").html();
  var template = Handlebars.compile(source);
  var wrapper  = {objects: disklist};

In html:

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

But nothing prints!

How do I fix this?

Also, if there is a way to do this with just bare-bones JavaScript, please do share!

Upvotes: 0

Views: 72

Answers (2)

Kai Hao
Kai Hao

Reputation: 689

Plain js:

var disklist = [
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]},
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate2","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]},
    {";_id":"5704630a7d4cd367f8dsdce7","name":"Seagate3","description":"This awesome Hard disk" ,"categories":["SDD","256GB"]}
];


document.getElementById('container').innerHTML = disklist.map(function(disk) {
  return '<li><h1>' + disk.name + '</h1></li>';
}).join('');
<ul id="container">
</ul>

Not sure if this is what you want ?

WALKTHROUGH: We create an element and make it the container of what we are going to render into. Next we set it's innerHTML to a string which is what we are going to create. disklist.map go through the disklist array and apply each item with a string, which is <li><h1>{{disk.name}}</h1></li> in this case. You can change the content to whatever you like, it's just HTML. Then, we join the array of strings into one big string using .join(''). Finally, we set the innerHTML to the string we just created, dala.

Upvotes: 1

jered
jered

Reputation: 11591

You're using the wrong type for the template. It should be text/x-handlebars-template. I'm not 100% sure this matters, but you should be consistent with Handlebars' own documentation.

Also, I'm not seeing a line that actually renders HTML. To use Handlebars, you need two things: a compiled template and a "context". After you define your context (here I assume it's the wrapper variable, which should probably be named something like "context") you need to execute the template like so:

var renderedHTML = template(wrapper); // pass your compiled template the context
document.getElementById("container").appendChild(renderedHTML);
// you might have to use innerHTML = renderedHTML instead
// I forget if renderedHTML will be a string or DOM node
// For jQuery just use $("#container").append(renderedHTML);

Your compiled template takes the context you give it and uses it as the data to plug in to itself, and returns the result so you can insert it into your page.

Upvotes: 0

Related Questions