在IONIC列表中循环json动态内容数组

Question

我正在从 json 响应中填充我的离子列表，如下所示：

{
    "engineering": [{
            "0": {
                "id": 1,
                "name": "Amrita School of Engineering"
            },
            "location": "Kollam"
        },
        {
            "0": {
                "id": 3,
                "name": "Amrita School of Medicine"
            },
            "1": {
                "id": 4,
                "name": "Amrita School of Engineering"
            },
            "location": "Kozhikode"
        }
    ],
    "medicine": [{
            "0": {
                "id": 2,
                "name": "Amrita School of Medicine"
            },
            "location": "Kollam"
        },
        []
    ]
}

我的 Ionic 列表是：

 <ion-list no-lines>
        <ion-list-header *ngFor="let details of searchResults?.engineering">
          <div style="background-color:#2f6b8c;padding-top:10px;padding-bottom:10px;padding-left:5px;color:white">{{details.location}}</div>
          <button ion-item *ngFor="let detail of details?.0" (click)="itemSelected(detail.id)">
              <span style="text-transform: capitalize;">{{detail.name}}</span>
          </button>  
        </ion-list-header>
      </ion-list>

我需要的用户界面是：

其中kerala 是location，喀拉拉邦下的数据应该是0,1 的东西。

使用它我可以打印location 对象数据，而每个位置都有不同的列表。在上面的 JSON 中，您可以看到工程中的 Kollam 只有一个学院名称，所以 '0'，而工程中的 kozhikode 有 2 个学院，所以 0,1。如果有 n 所大学，那么 0 到 n 数组将在那里。但我怎么能在列表中填充它呢？有什么帮助吗？

Answer 1

为了能够使用 *ngFor 指令进行迭代，您必须具有“可迭代”，例如数组。在您的情况下，您需要的数据在对象的属性中，而不是数组中。

如果无法修改数据源以对您的情况更友好，我建议您修改数据客户端。

基本上在你得到这些数据后，你需要在本地把它转换成这样：

{
"engineering": [
    {
        "schools": [
          {
            "id": 1,
            "name": "Amrita School of Engineering"
          },
        ],
        "location": "Kollam"
    },
    {
        "schools": [ 
          {
            "id": 3,
            "name": "Amrita School of Medicine"
          },
          {
            "id": 4,
            "name": "Amrita School of Engineering"
          }
        ],
        "location": "Kozhikode"
    }
],
"medicine": [{
        "schools": [
          {
              "id": 2,
              "name": "Amrita School of Medicine"
          },
        ],
        "location": "Kollam"
    },
]

}

其中“学校”是包含您需要的新数组。 现在的问题是如何转换数据。

通常我会使用 in...for 循环遍历您从服务器接收到的原始对象：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

在您的情况下，您必须通过阅读原始结构并执行必要的操作来创建这个新结构。不过，这可能是我幼稚的评估。

你很可能需要使用这个：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values 见那里的例子。

如果你现在可以解决它，请告诉我。或者，如果你挣扎。

Answer 2

老实说，您的json 很复杂，如果您可以更改其格式，请执行此操作，如果不介意这里的解决方案。

创建一个管道（我称之为值），它将我们的对象转换为数组

  import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'value'
    })

        export class ValuePipe implements PipeTransform {

    transform(value: any, args?: any[]): any[] {
            let values = (<any>Object).values(value);      
            return values;
        }

    }

这是html代码

 <ion-list no-lines>
        <ion-list-header *ngFor="let details of searchResults?.engineering">
          <div style="background-color:#2f6b8c;padding-top:10px;padding-bottom:10px;padding-left:5px;color:white">{{details.location}} </div>
          <button ion-item *ngFor='let detail of details | value' (click)="itemSelected(detail.id)"> 
              <span style="text-transform: capitalize;">{{detail.name}}</span> 
          </button>  
        </ion-list-header>
      </ion-list>

这是working DEMO too