嵌套JSON循環在車把

Question

我有以下的JSON格式，並想知道如何遍歷這個JSON在車把

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

我在上面的格式正從的NodeJS對象和需要幫助的組織下面的代碼使用循環機制的車把。

<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> 

Answer 1

你好，我用的論文數據：

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

，這裏是循環，你應該使用：

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

這裏是一個小提琴鏈接，這樣你可以看到它的工作原理： https://jsfiddle.net/ChristopheThiry/bwjr2frf/