Looping through an array of json objects

Question

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!

Kai Hao · Accepted Answer · 2016-04-08 08:41:26Z

1

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.

edited Apr 8, 2016 at 8:41

answered Apr 7, 2016 at 16:58

Kai Hao

6895 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

André Dion Over a year ago

Your output contains commas because you haven't specified a delimiter for join: it should be .join('').

QuikProBroNa Over a year ago

What effect does this have in SEO?

Kai Hao Over a year ago

Every client side rendering will effect SEO in some ways. (Though Google supports running client side rendering for you, if you are only concern of Google). If you really need the best SEO solution, you have to try server side rendering or even isomorphic.

QuikProBroNa Over a year ago

Um, thanks. Can you explain how this actually works? I am also trying to filter it using the categories. Eg, I want to display the list of all SSD's....

Kai Hao Over a year ago

Sure, I've edited it in the answer. Please let me know if you don't understand anything.

jered · Accepted Answer · 2016-04-07 16:57:50Z

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.

Collectives™ on Stack Overflow

Looping through an array of json objects

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related