TypeScript 如何循环遍历对象数组答案

【问题标题】：TypeScript How To Loop Through Array Of ObjectsTypeScript 如何循环遍历对象数组
【发布时间】：2021-08-27 07:37:34
【问题描述】：

我目前正忙于一个 Angular 项目，我在该项目中收到一个包含来自 API 的对象数组的对象。

“reportData”是通过我的服务作为参数发送到 API 的对象。

从 API 发回的数据示例：

我想遍历数组并将产品名称推送到数组中，与 averageQuantityOrdered 相同，但我不知道如何遍历数组并获取值。

让我感到困惑的一件事是，当您查看随附的屏幕截图时，结果看起来像是一个包含对象数组的对象。而且我认为这就是为什么我不能循环遍历它的原因，因为从技术上讲，它是一个对象而不是数组。

我尝试过这样的事情（retrivedData 是对象数组），但随后出现错误“无法读取未定义的属性 'forEach'”：

retrievedData: any;

this.retrievedData.array.forEach(element => {
          this.productNames.push(element.ProductName);
        });

我使用服务来检索数据：

onSubmit(form:NgForm)
  {

    this.service.postReportData().subscribe(
      res => {
        this.retrievedData = res;
        console.log(this.retrievedData);
      },
      err => {
        console.log(err);
      }
    );

  }

任何帮助将不胜感激！

【问题讨论】：

retrievedData 是如何设置的？一个http调用？如果它是异步的，您需要在 subscribe 内完成此类工作
@Ric 我只是简单地将其声明为任何。 “检索数据：任何；”
它是如何设置的？手动还是通过 api 调用？
所以您可以在订阅中执行：this.retrievedData.forEach(item => { })。假设返回的数据不为 null / undefined
你可以使用 JS Array#map。在订阅内部执行此操作：this.productNames = res.reportData.map((data: any) => data.ProductName);。您不能在订阅之外执行此操作，因为您永远不知道 observable 何时会发出，也就是它是异步的。在this 帖子中了解有关异步数据的更多信息。

标签： arrays angular typescript javascript-objects

【解决方案1】：

所以你收到的是一个包含对象数组的对象

你的res 应该是类型

type Item = {
  ProductName: string;
  AverageQuantityOrdered: number;
  ProductOrders: unknown[];
}

type RetrievedData = {
  reportData: Item[];
}

因此您可以将RetrievedData 设置为retrievedData 变量的类型

retrievedData: RetrievedData

而不是any

然后retrievedData.reportData 会给你数组。

【讨论】：

【解决方案2】：

感谢大家提供有用的 cmets！

我得到了它使用以下代码：

onSubmit(form:NgForm)
  {
    this.service.postReportData().subscribe(
      res => {
        this.retrievedData = res;

        this.retrievedData.reportData.forEach(function (item) {
          console.log(item);
          console.log(item.ProductName);
          console.log(item.AverageQuantityOrdered);
        });

      },
      err => {
        console.log(err);
      }
    );

  }

由于 reportData 包含对象数组，因此我必须循环遍历它而不是检索数据。

再次感谢大家，感谢大家的帮助！

【讨论】：