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/

在把手中嵌套的JSON循环

1 个答案: