时间戳

首页 > 解决方案 > 如何在 Ionic 中获取嵌套 JSON 数组的值？

arrays - 如何在 Ionic 中获取嵌套 JSON 数组的值？

问题描述

我是 Ionic 的新手，我正在尝试显示嵌套列表。我正在使用来自服务器的 JSON 响应来获取所有值。这是我的服务器响应。

{
    "addonCategories": [
        {
            "id": 24,
            "name": "Cooking type",
            "parent_id": 0,
            "product_category": 10,
            "selection": "single",
            "type": "other",
            "order": null,
            "shows_selection": true,
            "selection_type": true,
            "direct_pricing": false,
            "is_size": false,
            "addonItems": [
                {
                    "id": 725,
                    "name": "Lightly Done",
                    "product_id": 0,
                    "addon_category_id": 24,
                    "price": 0,
                    "image": "",
                    "attribute": null,
                    "main_category_id": 24,
                    "half_image": null,
                    "full_image": null,
                    "order": null,
                    "large_price": "",
                    "description": null,
                    "default_sauce": 0,
                    "restaurants_id": 0
                },
                {
                    "id": 723,
                    "name": "Regular",
                    "product_id": 0,
                    "addon_category_id": 24,
                    "price": 0,
                    "image": "",
                    "attribute": null,
                    "main_category_id": 24,
                    "half_image": null,
                    "full_image": null,
                    "order": null,
                    "large_price": "",
                    "description": null,
                    "default_sauce": 0,
                    "restaurants_id": 0
                },
                {
                    "id": 724,
                    "name": "Well Done",
                    "product_id": 0,
                    "addon_category_id": 24,
                    "price": 0,
                    "image": "",
                    "attribute": null,
                    "main_category_id": 24,
                    "half_image": null,
                    "full_image": null,
                    "order": null,
                    "large_price": "",
                    "description": null,
                    "default_sauce": 0,
                    "restaurants_id": 0
                }
            ]
        }
    ]
}

我正在使用以下 HTML 代码显示带有复选框选择的嵌套列表。

<ion-list class="setting-content">
<ion-list-header *ngFor="let item of (addonDetail | async)?.addonCategories" no-lines>{{item.name}}
          <ion-item-group class="fst-group">
          <ion-item *ngFor="let item1 of item.addonItems" no-lines>
            <ion-label >{{item1.name}}</ion-label>
            <ion-checkbox (click)="clickAddon(item1)" item-right></ion-checkbox>
          </ion-item>
          </ion-item-group>
      </ion-list-header>
</ion-list>

那么如何name从内部 JSON 数组中获取 saddonItems呢？

当我运行代码时，它给了我来自主数组 ( addonCategories) 的名称，而不是来自内部数组 ( ) 的名称addonItems。

标签： arraysjsonionic-framework

解决方案

问题在于您的 HTML 模板的结构 - 简而言之，当您有 . 时ion-list-header，它会尝试在ion-label. 因此，您的嵌套ion-label（在您的内部ion-item）的存在会破坏模板。

相反，根据此处的 Ionic 文档，您ion-list-header不应包含任何子ion-item元素：https ://ionicframework.com/docs/api/components/item/Item/#advanced

相反，如果您像这样重组 HTML 模板，它将起作用：

<ion-list class="setting-content">
  <ng-container *ngFor="let item of addonCategories">
    <ion-list-header no-lines>{{item.name}}</ion-list-header>
    <ion-item-group class="fst-group">
      <ion-item *ngFor="let addOn of item.addonItems" no-lines>
        <ion-label>{{addOn.name}}</ion-label>
        <ion-checkbox (click)="clickAddon(addOn)" item-right></ion-checkbox>
      </ion-item>
    </ion-item-group>
  </ng-container>
</ion-list>

请注意，第 3 行ion-list-header已打开和关闭。

因为需要嵌套*ngFor指令——我猜这就是你试图将ion-item元素嵌入到标题中的原因——我ng-container改用了。这样，您仍然可以遍历每个“标题”项的嵌套数组addonItems。

在这里工作 Plnkr：https ://embed.plnkr.co/RSd1MdmajLxpdZmTHk8J/

推荐阅读