在Angular模板中处理变量JSON响应

Question

I'm trying to figure out how to handle dynamic JSON responses with a single angular template. Below are two examples of the same template, but different JSON responses (somewhat similar). I'm trying to figure out how to handle both (and quite possibly more) of these responses in the same template. Essentially how do I handle UNKNOWN levels in a json response?

http://plnkr.co/edit/1H9AfwUYvcYVEBmBb0Ln?p=preview

{"book": {
        "title": "Book Title",
        "chapters": [
            {
                "title": "Chapter One",
                "units": [
                    {
                        "title" : "Unit One",
                        "sections": [
                            {"title" : "Section One"},
                            {"title" : "Section Two"},
                            {"title" : "Section Three"}
                        ]
                    },
                    {"title" : "Unit Two"},
                    {"title" : "Unit Three"}
                ]
            },
            {"title": "Chapter Two"},
            {"title": "Chapter Three"}
        ]
    }};

http://plnkr.co/edit/8S6iCrF3A72MNEpKEhMu?p=preview

{"book": {
        "title": "Book Title",
        "chapters": [
            {
                "title": "Chapter One",
                "sections": [
                            {"title" : "Section One"},
                            {"title" : "Section Two"},
                            {"title" : "Section Three"}
                        ]
            },
            {"title": "Chapter Two"},
            {"title": "Chapter Three"}
        ]
    }};

Template:

  <div ng-repeat="item in book">
    {{item.title}}
    <ul>
          <li ng-repeat="chapter in item.chapters">
            {{chapter.title}}
          <ul>
            <li ng-repeat="unit in chapter.units">
              {{unit.title}}
              <ul>
                <li ng-repeat="section in unit.sections">
                  {{section.title}}
                </li>
              </ul>
            </li>
          </ul>
        </li>
        </ul>
  </div>

Answer 1

<div>
  {{ book.title }}
  <ul>
    <li ng-repeat="chapter in book.chapters" ng-if="book.chapters.length > 0">
      {{ chapter.title }}
      <ul>
        <li ng-repeat="unit in chapter.units" ng-if="chapter.units.length > 0">
          {{ unit.title }}
          <ul>
            <li ng-repeat="section in unit.sections">
              {{ section.title }}
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>