迭代 JSON 对象并在 angular 中打印多级值

Question

我必须遍历 nested/multilevel JSON 对象并需要创建一个多级菜单。

这是最终的 UI 视图。它需要为每个类别绑定名称、link 和图标。

我将从后端获取此格式的 JSON 对象::

{
  "data": [
    {
      "subMenu": [
        {
          "subMenu": [
            {
              "name": "Change Password",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Menu Rights",
              "link": " ",
              "icon": ""
            },
            {
              "name": "User Branch Rights",
              "link": " ",
              "icon": ""
            },
            {
              "name": "User Setup",
              "link": " ",
              "icon": ""
            }
          ],
          "name": "User Maintanace",
          "icon": ""
        }
      ],
      "name": "Administration",
      "icon": ""
    },
    {
      "subMenu": [
        {
          "subMenu": [
            {
              "name": "Area List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "City List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Country List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "District List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "State List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Village Core Mapping",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Village List",
              "link": " ",
              "icon": ""
            }
          ],
          "name": "Address Setup",
          "icon": ""
        },
        {
          "subMenu": [
            {
              "name": "Branch Setup",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Company Setup",
              "link": " ",
              "icon": ""
            }
          ],
          "name": "Organisational Setup",
          "icon": ""
        }
      ],
      "name": "Configurations",
      "icon": ""
    },
    {
      "name": "MIS",
      "icon": "",
      "link": " "
    },
    {
      "subMenu": [
        {
          "name": "Account Management",
          "icon": "",
          "link": " "
        },
        {
          "subMenu": [
            {
              "name": "Customers",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Prospect List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Referral List",
              "link": " ",
              "icon": ""
            },
            {
              "name": "Referred List",
              "link": " ",
              "icon": ""
            }
          ],
          "name": "Customer Management",
          "icon": ""
        },
        {
          "name": "Document Printings",
          "icon": "",
          "link": " "
        },
        {
          "name": "Loan Management",
          "icon": "",
          "link": " "
        }
      ],
      "name": "Operational Masters",
      "icon": ""
    },
    {
      "name": "Processes",
      "icon": "",
      "link": " "
    }
  ],
  "status": "S"
}

有人可以帮我隔离以上数据吗？任何帮助，将不胜感激。谢谢。

Answer 1

如@Ravindra 所述，这可以通过递归完成

<ul>
  <li *ngFor="let menuItem of menuData"> {{ menuItem.name }}
    <ng-container *ngIf="menuItem.subMenu">
      <ng-container *ngTemplateOutlet="inner; context:menuItem"></ng-container>
    </ng-container>
  </li>
</ul>

<ng-template #inner let-subMenu="subMenu">
  <ul>
    <li *ngFor="let menuItem of subMenu">
      {{ menuItem.name }}
      <ng-container *ngIf="menuItem.subMenu">
        <ng-container *ngTemplateOutlet="inner; context:menuItem"></ng-container>
      </ng-container>
    </li>
  </ul>
</ng-template>

See this Demo

迭代 JSON 对象并在 angular 中打印多级值

Iterate JSON object and print the multilevel value in angular

loops

menu

multi-level

angular