Handling variable JSON response in Angular template

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>

Show your code here in the question. Just showing some data and a link doesn't cut it. We should be able to review your issue in a stand alone question without having to go off site to multiple links. There really isn't even a question here — charlietfl
– charlietfl, Commented Sep 22, 2015 at 22:58
There are lots of examples around. You are looking for a recursive tree. The main thing is to name the nested property names the same for children so at each level you can do if children.length. Can put the sub headings like chapter in same name properties also at each level....other properties like text or content. keep structure consistent and it will all fall into place — charlietfl
– charlietfl, Commented Sep 22, 2015 at 23:04

Tyler · Accepted Answer · 2015-09-23 01:34:34Z

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>

answered Sep 23, 2015 at 1:34

Tyler

11.5k10 gold badges72 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Handling variable JSON response in Angular template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related