ERROR 错误：未捕获（承诺）：TypeError：this.products 不可迭代。（但它是可迭代的）答案

【问题标题】：ERROR Error: Uncaught (in promise): TypeError: this.products is not iterable. (but it is iterable)ERROR 错误：未捕获（承诺）：TypeError：this.products 不可迭代。（但它是可迭代的）
【发布时间】：2020-10-18 11:25:18
【问题描述】：

我想从 JSON 数组中获取唯一值。

数据来自 fetch API。这显然是可迭代的

[注意产品变量是 JSON 的示例，实际上，我是通过调用 GetAllProducts() 填充数据]

products = 
[
  {
    "name": "APPLE 27 inch THUNDERBOLT DISPLAY",
    "show_room": "A iCenter",
    "stock": "1",
    "type": "DISPLAYS",
    "category": "APPLE",
    "id": "101"
  },
  {
    "name": "APPLE WIRELESS KEYBOARD",
    "show_room": "B iCenter",
    "stock": "2",
    "type": "MOUSE",
    "category": "MAC ACCESSORIES",
    "id": "107"
  }
]

当我尝试执行这个函数时发生错误：getDistinctCategoryValues()

这是我的 .ts 文件

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.page.html',
  styleUrls: ['./product-list.page.scss'],
})
export class ProductListPage implements OnInit {

  constructor(private dataService: DataService,
              private router: Router) {
    this.GetAllProducts();
    this.getDistinctCategoryValues();
  }

  products: any;


  ngOnInit() {
  }

  async GetAllProducts() {
    const response = await this.dataService.GetProducts();
    const dataService = await response.json();
    this.products = dataService;
    console.log(this.products);
  }

  getDistinctCategoryValues() {

    const lookup = {};
    const result = [];

    console.log(this.products);
    for (const item of this.products) {
      const currentVar = item.category;

      if (!(currentVar in lookup)) {
        lookup[currentVar] = 1;
        result.push(currentVar);
      }
    }

    console.log(result);
    return result;

  }

}

现在当我运行 getDistinctCategoryValues() 时，出现错误：

ERROR Error: Uncaught (in promise): TypeError: this.products is not iterable.

奇怪的是，

当我从GetAllProducts() console.log() 时，products 变量中的所有数据都正常
但是当我从getDistinctCategoryValues()console.log() 时，产品变量显示未定义

IDK 出了什么问题。为什么数据在 1 行之后就消失了？ [参见构造函数]。我的 API 正在运行，没有错误。

[顺便说一句，我将https://www.npmjs.com/package/json-server 用于 JSON ]

【问题讨论】：

标签： javascript json angular typescript json-server

【解决方案1】：

这是因为你的GetAllProducts是一个异步函数，它等待响应const response = await this.dataService.GetProducts()；这意味着 GetAllProducts 函数内的任何代码都不会运行，同时在 async 函数之后运行的任何代码都将正常运行，因此为什么您的 this.product 将始终返回 undefined 要解决此问题，请在 await 函数中移动 getDistinctCategoryValues() 或使 GetAllProducts 返回产品，然后在 getDistinctCategoryValues() 中使用它，或使用生成器函数

【讨论】：

那我应该怎么做才能保存数据以便以后使用呢？
我建议了一些解决方案，看看他们
感谢您的回答，现在如果我在 GetAllProducts() 中执行 getDistinctCategoryValues() ，一切都很好。但我需要将其永久保存到变量中。
只需声明一个变量并为其分配新值

【解决方案2】：

您只需要更改产品：任何；到产品 = []; 其他所有想法都应该在没有任何变化的情况下工作。

和

构造函数（私有数据服务：DataService，私有路由器：路由器）{ this.GetAllProducts(); this.getDistinctCategoryValues(); }

不会工作。你需要移动 this.getDistinctCategoryValues();到 ngOnInit，或调用 this.GetAllProducts()

【讨论】：