从嵌套的JSON结构的角度阅读应用 [英] Angular app reading from a nested json structure

问题描述

我有一个角度的应用程序从一个JSON看起来像下面写着：

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", 
    }
}
]

我试图读取该JSON和它的应用使得在页面结构如下所示

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

我怎样才能在这个角结构？这里是什么我试过 plunker 。

推荐答案

您需要先汇总数据。然后，您可以重复在总结渲染父级列表。然后重复嵌套可以有条件地显示儿童的数据。

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.

摘要阵列（用一个简单的循环，或者像 lodash 看中库生成）可能看起来像这样的：

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>

如果你想尝试的code，这里是Plunkr

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

这篇关于从嵌套的JSON结构的角度阅读应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！