Using handlebars to iterate over a complex object

Question

I have a special array how can I itereate over it ?

It looks like:

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

}

I tried different things, but they did not work out...

Thank you.

Answer 1

I am not fully clear on the requirements but as per provided information, looks like you are looking from something link this:

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

Assuming that your provided json data is wrapped inside a body and project structure i.e.

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

Here is a working jsFiddle from your data and html. You can improve this as required. Version and Tasks both can grow dynamically. I recommend you to go through this simple Handlebars tutorial.