Foreach Json 结果 Ionic Angular

Posted 2023-03-13

【中文标题】Foreach Json 结果 Ionic Angular

【英文标题】：Foreach Json results Ionic Angular

【发布时间】：2021-06-21 22:23:15

【问题描述】：

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

打字稿

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>

【问题讨论】：

我们在这里需要更多的上下文：“JSON 文件”是指 JSON API？ “找不到解决方案”是什么意思？ “普通 JSON 但不是对象格式”是什么意思 - 这没有意义，请举一些例子。

另外，您的示例 JSON 不是 JSON，它是一个 javascript 对象。

我有一个从 API 传输的 JSON 文件，里面的数据如下例所示。

当我说正常时，我的意思是没有数字，结果为 1:, 2: ...

但如果这是 API 决定返回的内容，您必须处理它吗？我不确定您要做什么。您展示的示例是具有键 1-4 的对象。也许你想要一个数组，像这样？ [id:1, name: "string", id:1, name: "string",...]，无论如何，在您的问题中包含您期望或想要实现的目标会非常有帮助:)

【参考方案1】：

你有多种可能循环这个响应对象：

使用来自角度的keyvalue 管道：*ngFor item of data | keyvalue 使用Object.values(data) 或Object.entries(data) 转换为数组。前者只给你值对象，后者也给你“数字”

您需要记住：返回的对象没有定义的顺序。所以如果你使用任何一种方法，迭代的顺序都没有定义，可能是随机的。

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

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

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

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

【讨论】：

我是 Ionic 的新手，并不了解所有内容，我尝试寻找最新版本的示例以试图理解但无济于事。你有一个例子让我试着理解吗？

angular.io/docs 是你最好的朋友。我认为角度文档非常广泛。键值管道示例：angular.io/api/common/KeyValuePipe#examples

但你知道 typescript 或者至少知道 javascript？

好的，我找到了，感谢您的指导，我会更新答案。