Search code examples
javascriptjquerymustache

Looping through Mustache JS

I am having trouble getting the data from JSON to insert into individual divs. I would like each of the image/videourls to insert into their own 

<div class="item"></div>

Currently, each object gets inserted on top of eachother (with my given template HTML) in the "item" class. I figure that there must be away to tell Mustache to insert each object in the array into it's own div with the class "item" so that the final result will be two divs with the HTML in the template inside each one.

I have JSON data:

{ "pictures" : [
  {
    "image": "1",
    "videourl": "http://www.youtube.com/embed/"
  },
  {
    "image": "4",
    "videourl": "http://www.youtube.com/embed"
  }
]}

and I have a template setup:

{{#pictures}}

    <div class="videoplay-main animated fadeIn" data-videourl="{{videourl}}">
        <img src="img/frontpage/{{image}}.jpg" />
    </div>

{{/pictures}}

And I have JS:

$.getJSON('js/data.json', function(data){
    var homeTemplate = $("#slider-template").html();
    var html = Mustache.render(homeTemplate, data);
    $('.item').html(html);
});
Solution

  • Well then you have to do it this way:

    {{#pictures}}
   <div class="item">
      <div class="videoplay-main animated fadeIn" data-videourl="{{videourl}}">
         <img src="img/frontpage/{{image}}.jpg" />
      </div>
   </div>
{{/pictures}}