5

He leído sobre el asunto pero como soy novato en Angular, NodeJS y Typescript no logro llevar la solución a mi código. Como detalle, la base de datos (Mysql) la tengo en un servidor y puedo verla por consola y trabajarla con una aplicación cliente (Postman) pero cuando trato de iterar me arroja un error, por lo que el documento desde donde trato de iterar debe estar mal programado. Y suponiendo que lo que quiero mostrar por pantalla es el campo "rut" que aparece en mi documento-list.component.html, cómo debería hacerlo?

El error:

trying to diff '[object Object]'. Only arrays and iterables are allowed.

Y el error comienza aquí:

DOCUMENTO-LIST.COMPONENT.HTML
<div class="col-md-4" *ngFor="let documento of documentos">
    <div class="card text-center">
        <div class="card-header">
            {{documento.rut}}
        </div>
        <div class="card-body">

        </div>
    </div>

</div>

El siguiente código llama a un servicio que llama a un modelo que supongo, debe estar mal (posee el siguiente código: export interface Documento {rut?: number}) y me provoca el error porque si en vez de this.documentos = res utilizo console.log = res, la consola me lee correctamente los datos de la tabla.

DOCUMENTO-LIST.COMPONENT.TS
import { Component, OnInit } from '@angular/core';

import { DocumentosService } from '../../services/documentos.service';

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

  documentos: any = [];

  constructor(private documentosService: DocumentosService) { }

  ngOnInit() {
    this.documentosService.getDocumentos().subscribe(
      res => {
        this.documentos = res;
      },
      err => console.error(err)
    );
  }

}
6
  • 4
    Hola y bienvenido! Lo que te está diciendo el error es que al NgFor le llega un objeto y no un array o un iterable. Lo que podes hacer primero es ver como te llega la respuesta del servicio con simplemente console.log(res) con eso validas que te esté llegando lo que esperas. Otra cosa a tener en cuenta: res seguramente llega en formato JSON y quizás dentro tenga un array, deberías igualar tu variable documentos al array del JSON, algo así como documentos = res.documentos
    – andres
    Commented el 6 ago. 2020 a las 12:01
  • 1
    Gracias por responder. Lo intentaré por la tarde porque ahora ya no estoy en el computador. Commented el 6 ago. 2020 a las 13:10
  • 1
    Hola. Como comenta @andres, lo que estás recibiendo no es un arreglo, es un objeto. Con un console.log en tu subscribe deberías de ser capaz de visualizar la estructura de la respuesta.
    – Legna
    Commented el 6 ago. 2020 a las 13:41
  • Si pasas el texto de lo que devuelve el console.log(res) podemos ver la estructura de la respuesta del servicio y de esta manera darte una mejor respuesta. No hace falta que muestres los datos en sí, lo que mas importa es la estructura del JSON.
    – andres
    Commented el 6 ago. 2020 a las 13:52
  • Puede mostrar que te aparece cuando pones {{ documentos }} en tu html : Commented el 9 ago. 2020 a las 7:01

1 respuesta 1

0

Lo mejor seria o hacer que backend mande un array o transformarlo dentro del flujo observable de la peticion http del servicio que uses para traer los datos... pero esto serviria en todo caso para hacerlo en el componente:

ngOnInit() {
  this.documentosService.getDocumentos()
  .subscribe((res: any) => {

      let result = [];
      
      let keys = Object.keys(res);
        keys.forEach(function(key){
            result.push(res[key]);
        });

      this.documentos = result;
    },
    err => console.error(err)
  );
}

la recomendacion si back no puede modificar los datos seria aplicar la conversion aqui descrita a tu metodo de carga de datos desde back.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.