使用把手迭代复杂对象

时间:2015-07-28 06:30:02

标签: javascript node.js handlebars.js

我有一个特殊的数组如何迭代它?

看起来像:

{
                "0.1.0": {
                    "pictures": {
                        "list": ""
                        },
                    "show": true,
                    "implemented ": false,
                    "percentageDoneVersion": 100,                   
                    "description": "Programmierung ...",
                    "tasks": { 
                    "1":{
                            "percentageDone":10,
                            "description":"Text1..."
                        },
                        "2":{
                            "percentageDone":70,
                            "description":"Text2..."
                        },
                        "3":{
                            "percentageDone":10,
                            "description":"Text3..."
                            }
                    }
                }

}

我尝试了不同的东西,但他们没有成功......

谢谢。

1 个答案:

答案 0 :(得分:2)

我对要求并不完全清楚,但根据提供的信息,看起来你正在寻找一些链接:

<script id="template" type="text/x-template">
  <div class="row" style="">
    <hr>
    <div class="col-xs-12 col-lg-12">
      <div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#versionHeading{{@index}}" href="#versionHeading{{@index}}">{{{body.project.versionHeading}}}</a></h4>
          </div>
          <div id="versionHeading{{@index}}" class="panel-collapse collapse in">
            <div class="panel-body">
              <p>{{{body.project.versionIntro}}}:</p>
              {{#each body.project.versionContent}}
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title"><a data-toggle="collapse" data-parent="#mainVersion{{@index}}" href="#mainVersion{{@index}}">Version {{@key}}</a></h4>
                </div>
                <div id="mainVersion{{@index}}" class="panel-collapse collapse in">
                  <div class="panel-body">
                    <p>{{{this.description}}}</p>
                    <ul>
                      {{#each this.tasks}}
                      <li>{{@key}}.) {{{this.description}}} (progress ({{this.percentageDone}}% done)</li>
                      {{/each}}
                    </ul>
                  </div>
                </div>
              </div>
              {{/each}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</script>

假设您提供的json数据包含在正文和项目结构中,即

{
    "body": {
        "project": {
            "versionContent": {
                  ....
            }
        }
    }
}

以下是您的数据和HTML中的jsFiddle。您可以根据需要改进。版本和任务都可以动态增长。我建议您浏览this简单的Handlebars教程。