使用把手遍历复杂对象

Using handlebars to iterate over a complex object

本文关键字：复杂 对象 遍历      更新时间：2023-09-26

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

它看起来像:

{
                "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..."
                            }
                    }
                }

}

我尝试了不同的方法，但都没有成功。

谢谢。

我不完全清楚的要求，但根据提供的信息，看起来你正在寻找的东西链接这个:

<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": {
                  ....
            }
        }
    }
}

这是一个工作的jsFiddle从您的数据和html。您可以根据需要对其进行改进。版本和任务都可以动态增长。我建议你去看看这个简单的车把教程。

相关文章：