Angular app reading from a nested json structure

Question

I have an angular app which reads from a json that looks like the following:

[{
        "category": {
            "id": 40, 
            "name": "Category 1", 
            "parent": {
                "id": 38, 
                "name": "Parent Category 1", 
                "parent": {
                    "id": 23, 
                    "name": "Parent name", 
                    "level": 1
                }, 
                "level": 2
            }, 
            "level": 3
        }, 
        "subcategory": {
            "course_name": "Category Name 1", 
            "title": "Category Title", 
        }
    },
    {
        "category": {
            "id": 40, 
            "name": "Category 1", 
            "parent": {
                "id": 38, 
                "name": "Parent Category 1", 
                "parent": {
                    "id": 23, 
                    "name": "Parent name", 
                    "level": 1
                }, 
                "level": 2
            }, 
            "level": 3
        }, 
        "subcategory": {
            "course_name": "Category Name 2", 
            "title": "Category Title", 
        }
    },
    {
    "category": {
        "id": 40, 
        "name": "Category 1", 
        "parent": {
            "id": 39, 
            "name": "Parent Category 2", 
            "parent": {
                "id": 23, 
                "name": "Parent name", 
                "level": 1
            }, 
            "level": 2
        }, 
        "level": 3
    }, 
    "subcategory": {
        "course_name": "Category Name 3", 
        "title": "Category Title", 
    }
}
]

I am trying to read this json and write it in the app such that the structure in the page looks like the following

Parent name
    Parent Category 1
        Category 1
            Category Name 1, Category Title
            Category name 2, Category Title
    Parent Category 2
        Category 1
            Category Name 3, Category Title

How can i get this structure in angular? Here is the plunker of what i tried.

Am sorry but i am new to angular, and other front end applications. Just started learning those. A little help will be great. — Abhishek
– Abhishek, Commented May 12, 2014 at 16:47
What do you mean by "structure in the page"? I think what you are looking for is parsing JSON using Javascript. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — dopplesoldner
– dopplesoldner, Commented May 12, 2014 at 16:56
i am writing a plunkr of what a i tried. I will update it now. Sorry i didnt post a proper question — Abhishek
– Abhishek, Commented May 12, 2014 at 17:12

j.wittwer · Accepted Answer · 2014-05-12 22:20:49Z

1

You need to summarize the data first. Then, you can repeat over the summaries to render parent level lists. Nested repeats can then conditionally display the children data.

The summary arrays (generated with a simple loop, or maybe a fancy library like lodash) might look like this:

$scope.parents = [{
  "id": 23,
  "name": "Parent name",
  "level": 1
}]

$scope.parentCategories = [{
  "id": 38,
  "name": "Parent Category 1"
}, {
  "id": 39,
  "name": "Parent Category 2"
}]

$scope.categories = [{
  "id": 40,
  "name": "Category 1"
}]

Then you could use them like this:

<div ng-repeat="parent in parents">
  <ul>
    <li>{{parent.name}}
      <ul ng-repeat="parentcategory in parentCategories">
        <li>{{parentcategory.name}}
          <ul ng-repeat="category in categories">
            <li>{{category.name}}
              <ul ng-repeat="program in programs" 
                  ng-show="program.category.id == category.id">
                <li ng-show="program.category.parent.id == parentcategory.id">
                  {{program.subcategory.course_name}} {{program.subcategory.title}}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

If you want to try the code, here it is on Plunkr.

edited May 12, 2014 at 22:20

answered May 12, 2014 at 22:15

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

1 Comment

Abhishek Over a year ago

hi.. a small issue i am facing in this question :) stackoverflow.com/questions/23817829/…

Collectives™ on Stack Overflow

Angular app reading from a nested json structure

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related