如何迭代对象数组或将对象列表转换为数组？

Posted 2023-03-07

【中文标题】如何迭代对象数组或将对象列表转换为数组？

【英文标题】：How to iterate an array of objects or convert the list of objects to array?

【发布时间】：2020-04-11 06:57:41

【问题描述】：

当我从 SqlServer 调用 API 时，我有以下结构：

  "recordsets": [
    [
      
        "id_alquiler": 71735,
        "nombre_tipo_exhibidor": "Exhibidores de Temporada",
        "nombre_empresa": "TIOMAE",
        "nombre_estado_alquiler": "Por Montar",
        "marca": "ElTio",
        "nombre_sucursal": "EUAI"
      ,
      
        "id_alquiler": 71736,
        "nombre_tipo_exhibidor": "Exhibidores de Temporada",
        "nombre_empresa": "TIOELTOE",
        "nombre_estado_alquiler": "Por Montar",
        "marca": "Wuayba",
        "nombre_sucursal": "TOBAIE"
      ,

当我通过资源管理器在我的 .ts 组件中调用 API 时，它会向我发送此错误“尝试区分 '[object Object]'。只允许使用数组和可迭代对象”

我有结构的界面，可以在后面或前面按照我调用对象的顺序正确键入对象，但它仍然给我一个错误，我知道这是因为我需要转换对象，但我已经用 .map () 和 .keys () 以各种方式进行了测试，我不给，请帮忙。这是后端返回查询的函数：

export async function listAlq(req: Request, res: Response) 
    console.time('loop')
    try 
        let response:Alquiler = await pool1.query(
            "Select query");   
        console.log(response);
        res.status(200).json(response);
    
    catch(error)  //Capturando error
       console.error(error, 'Internal server Error', res.status(500));   
    
    console.timeEnd('loop')

Angular 中的服务

@Injectable(
  providedIn: 'root'
)
export class DataService 
  constructor(
    private http: HttpClient
  )  

  getAllAlq() 
    return this.http.get<Alquiler[]>('http://localhost:3000/api/alq');
  

Angular 组件.tsc

export class AlquileresComponent implements OnInit 

  alquiler: Alquiler[] = [];

  constructor(
    private dataService: DataService
  )  

  ngOnInit() 
    this.fetchAlq();
  

  fetchAlq() 
    this.dataService.getAllAlq()
    .subscribe(alquiler => 
      this.alquiler = alquiler;
      console.log(alquiler);
    );
  

和我的 html

<app-alquileres *ngFor="let alq of alquiler.recordsets">
    <div>
        <h5> alq.id_alquiler </h5>
        <h5> alq.marca </h5>
        <h5> alq.nombre_empresa </h5>
        <h5> alq.nombre_estado_alquiler </h5>
        <h5> alq.nombre_sucursal </h5>
    </div>
</app-alquileres>

我目前正在无限运行对象，我无法在 DOM 中绘制对象，请帮助

【问题讨论】：

检查这个？？？？ stackblitz.com/edit/angular-loop-through-arrays

我工作了，非常感谢兄弟

【参考方案1】：

我认为您的对象嵌套的深度比您的 html 预期的要深。 根据你的 sn-p ...

  "recordsets": [
    [
      
        "id_alquiler": 71735,
        "nombre_tipo_exhibidor": "Exhibidores de Temporada",
        "nombre_empresa": "TIOMAE",
        "nombre_estado_alquiler": "Por Montar",
        "marca": "ElTio",
        "nombre_sucursal": "EUAI"
      ,
      
        "id_alquiler": 71736,
        "nombre_tipo_exhibidor": "Exhibidores de Temporada",
        "nombre_empresa": "TIOELTOE",
        "nombre_estado_alquiler": "Por Montar",
        "marca": "Wuayba",
        "nombre_sucursal": "TOBAIE"
      ,

alquiler.recordsets 是一个包含对象的数组。

不确定更改服务或 html 会更容易/更好，但我敢打赌，如果您将当前的 html 更改为以下内容，您应该会看到一些东西。

<app-alquileres *ngFor="let alq of alquiler.recordsets[0]">
    <div>
        <h5> alq.id_alquiler </h5>
        <h5> alq.marca </h5>
        <h5> alq.nombre_empresa </h5>
        <h5> alq.nombre_estado_alquiler </h5>
        <h5> alq.nombre_sucursal </h5>
    </div>
</app-alquileres>

【讨论】：

你是对的，但仍然不清楚如果数据是数组数组，无论如何我认为这里就是这种情况，干得好 Alberto Lerdo ?

@Alberto Lerdo 试试这个解决方案，并在 src / app / components / alquiler / alquiler.component.ts (25,32) 中的 vs code ERROR 中向我发送以下错误：错误 TS2339: Property 'recordsets ' 类型' Alquiler [] ' 上不存在，我尝试更改为任何类型的服务，也没有任何 TT 也在组件中向我发送此消息，当将属性添加到 alquiler.recordsets[0] 属性'recordsets' 'Alquiler[]' 类型上不存在

【参考方案2】：

根据错误本身，它只是说您正在尝试迭代和对象。这是不允许的。为什么这么说基本上是..根据您的示例数据集，只要您有 recordsets 这是一个数组。在recordsets 本身下，您有另一个数组。（仔细查看开头的[ 方括号）它基本上返回您尝试在模板上迭代的数组对象的类型，这是不允许的。

您可以做的最简单的解决方案是相应地更改模板以匹配recordsets 中的可迭代元素：

<app-alquileres *ngFor="let alq of alquiler.recordsets[0]">
    <div>
        <h5> alq.id_alquiler </h5>
        <h5> alq.marca </h5>
        <h5> alq.nombre_empresa </h5>
        <h5> alq.nombre_estado_alquiler </h5>
        <h5> alq.nombre_sucursal </h5>
    </div>
</app-alquileres>

一旦您在模板中像这样指定alquiler.recordsets[0]，它将允许您的*ngFor 迭代每个对象，因为它实际上是一个Object 数组元素，而不是之前的Array 类型的对象。

另一种解决方案是在打字稿控制器上分配它：

export class AlquileresComponent implements OnInit 

  alquiler:any;

  constructor(
    private dataService: DataService
  )  

  ngOnInit() 
    this.fetchAlq();
  

  fetchAlq() 
    this.dataService.getAllAlq()
    .subscribe(alquiler => 
      this.alquiler = alquiler.recordsets[0];
      console.log(alquiler);
    );
  

在您的模板中：

<app-alquileres *ngFor="let alq of alquiler">
    <div>
        <h5> alq.id_alquiler </h5>
        <h5> alq.marca </h5>
        <h5> alq.nombre_empresa </h5>
        <h5> alq.nombre_estado_alquiler </h5>
        <h5> alq.nombre_sucursal </h5>
    </div>
</app-alquileres>

【讨论】：

? ，这是正确的，但您可以使用 map 运算符并只返回第一项仍然与之前的答案相同，但更清楚 ??