Foreach Json 结果离子 Angular

Question

我希望能够从 JSON 文件中检索结果，但我找不到解决方案。 我可以从正常的 JSON 中检索，但不能以 Object 格式检索。

Typescript

this.http.get('http://example.com/api')
  .subscribe((data) => {
    console.log(data);
  });

API JSON 文件以这种方式显示：

{
  1: {id:1, name: "string"}
  2: {id:1, name: "string"}
  3: {id:1, name: "string"}
  4: {id:1, name: "string"}
}

之后我希望能够对这些数据进行循环

<ion-item *ngFor="let item of data" >
  <div>
    {{item.name}}
  </div>
</ion-item>

先感谢您

这是我的问题的答案：

<ion-item *ngFor="let item of data | keyvalue" >
  <div>
    {{ item.key }} {{ item.value['data'] }}
  </div>
</ion-item>

Answer 1

您有多种可能循环此响应 object：

1. 使用来自keyvalue的键值 pipe： *ngFor item of data | keyvalue *ngFor item of data | keyvalue
2. 使用Object.values(data)或Object.entries(data)转换为数组。 前者只给你值 object，后者也是“数字”

您需要记住：返回的 object 没有定义的顺序。 因此，如果您使用任何一种方法，迭代的顺序都没有定义，并且可能是随机的。

它可能在您的机器/浏览器上是正确的，但您不应该依赖它。 因此，请确保在将数据转换为数组之后对其进行排序（如果数据应该是有序的）。

如果订单是由原始 object 中的“数字”键给出的，我建议使用Object.entries ，它会给你一个键值元组数组

[[1, {id:1, name: "string"}], [...], ...]

您可以按第一个元组项目轻松排序。