Nested JSON looping in handlebars

Question

I have the following json format and wanted to know how to iterate this json in handlebars

[ { items: [ [Object], [Object], [Object], [Object] ] },
  { items: [ [Object], [Object], [Object], [Object] ] },
  { items: [ [Object] ] } ]

I am getting object from nodejs in above format and need help to organise the following code in handlebars using looping mechanism.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                    <style>
                        .carousel-inner > .item > img,
                        .carousel-inner > .item > a > img {
                            width: 100%;
                            margin: auto;
                        }
                    </style>



                    <div class="container">
                        <div id="myCarousel" class="carousel slide" data-ride="carousel">

                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="item active col-md-12">
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                </div>
                                <div class="item  col-md-12">
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                </div>
                                <div class="item  col-md-12">
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                </div>
                                <div class="item  col-md-12">
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                    <div class="col-md-3"><img src="http://cdn.jssor.com/demos/img/travel/06.jpg" alt="Chania"> </div>
                                </div>
                            </div>
                            <!-- Left and right controls -->
                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
                        </div>
                    </div>

Possible duplicate of [How to iterate over array of objects in Handlebars?](http://stackoverflow.com/questions/22696886/how-to-iterate-over-array-of-objects-in-handlebars) — RaR, Mar 07 '17 at 13:59
{{#each mainArr}} {{#each this}} {{#each items}} {{/each}} {{/each}} {{/each}} — pradeep, Mar 08 '17 at 07:15

score 0 · Accepted Answer · answered Mar 08 '17 at 08:52

Hello I used theses data :

  var context = {
    "mainArr" : [{
      items: [
        ["Object"],
        ["Object"],
        ["Object"],
        ["Object"]
      ]
    }, {
      items: [
        ["Object"],
        ["Object"],
        ["Object"],
        ["Object"]
      ]
    }, {
      items: [
        ["Object"]
      ]
    }]
  };

And here is the loop you should use :

  <ul>
  {{#each mainArr}} 
        <li>
            <ul>
                    {{#each items}}
                    <li>value : {{this}}</li>
                    {{/each}}
            </ul>
  {{/each}}
  </ul>

Here is a fiddle link so that you can see that it works : https://jsfiddle.net/ChristopheThiry/bwjr2frf/

Your answer is helpful, also can you help furthur more by arranging the above hardcoded code in handlebars using each or anyother looping mechanism — pradeep, Mar 08 '17 at 09:55
What do you need exactly ? I don't understand what you need with this code. — Christophe, Mar 08 '17 at 11:19

Nested JSON looping in handlebars

1 Answers1