1

Hola buen dia llevo ya un rato intentando solucionar este problema, pero no he podido, agradesco de antemano su colaboracion.

Problema: Cuando intento renderizar mis objetos de mi backend (node.js express), por medio de un ion-card (Ionic(Angular)) utilizando la directiva *ngFor obtengo el siguiente error:

"ERROR Error: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

Esto ocurre cuando consumo un servicio GET de mi backend.

Codigo

//Node.js metodo get

app.get('/usuario', (req, rep) => {
    console.log('Metodo Get');

    //si se coloca en el find {estado:true} mostrara solo los registros con esta propiedad
    //util para ver los usuario activos en la base de datos
    User.find({}, 'id nombre apellido correo direccion telefono estado')
        .exec((err, usuariosDB) => {
            if (err) {
                return rep.status(500).json({
                    ok: false,
                    err
                });
            }

            if (usuariosDB === 0 || usuariosDB === undefined || usuariosDB === null) {
                return rep.status(500).json({
                    ok: false,
                    err: 'No hay usuarios en la base de datos'
                });
            }

            rep.json({
                usuariosDB
            });
        });

//ANGULAR servicio para consumir el get

public environment = environment;
  constructor( private http: HttpClient) { }


  getAllUsers(): Observable <Usuario[]> {
    console.log(this.environment.endpointUsuarios.url);
    return this.http.get<Usuario[]>(this.environment.endpointUsuarios.url);
  }

//ANGULAR metodo de mi componenete para utilizar el servicio

export class Tab1Component implements OnInit {
  public usuarios: Usuario[];
  constructor( private usuario: UsuariosService) { }

  ngOnInit() {
    this.getAllUsuarios();
  }


  public getAllUsuarios(): void {
    this.usuario.getAllUsers()
    .subscribe((resp) => {
      this.usuarios = resp;
      console.log(resp);
    }, (err) => {
      console.log(`metodo getAllUsuarios error ${err}`);
    });
  }
}

-- -

//HTML del componenete en el cual quiero utilizar el ngFor


<ion-grid>
    <ion-row>
        <ion-col> </ion-col>
    </ion-row>
</ion-grid>

<ion-content>
    <ion-grid>
        <ion-row *ngFor="let usuario of usuarios">
            <ion-col>
                <ion-card>
                    <ion-card-content>
                        <ion-label>Nombre: {{ usuario.nombre }}</ion-label>
                        <ion-label>Apellido: {{ usuario.apellido }}</ion-label>
                        <ion-label>Telefono: {{ usuario.telefono }}</ion-label>
                    </ion-card-content>
                </ion-card>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

<ion-grid>
    <ion-row>
        <ion-col size="12">
            <ion-button color="tertiary" expand="block" fill="solid" (click)="getAllUsuarios()"> Completar Registro </ion-button>
        </ion-col>
    </ion-row>
</ion-grid>




<app-footer> </app-footer>

\Interfaz de Usuario

export class Usuario {
        id: number;
        nombre: string;
        apellido: string;
        telefono: string;
        contrasena: string;
}

Muchas gracias, si necesitan mas detalles solo es que me digan y dare mas detalles de ser necesario.

Muchas gracias

/// Print de la respuesta en consola

introducir la descripción de la imagen aquí

2 respuestas 2

3

resp es un objeto y dentro de la propiedad usuariosDB tiene el array que necesitas

this.usuarios = resp.usuariosDB
1
  • 4
    Por favor lee Cómo responder, una explicación de tu aporte lo haría lucir de mejor calidad
    – user128299
    el 9 dic. 2019 a las 1:54
0

puedes probar poniendo los elementos en un arreglo

.subscribe((resp) => {

resp.forEach( ( user ) => {

                this.usuarios.push( user );
            } );
    } 

en caso que resp no sea un array puedes usar convertir en uno con Object.keys(resp) el codigo quedaria asi:

 .subscribe((resp) => {

    Object.keys(resp).forEach( ( user ) => {

                    this.usuarios.push( user );
                } );
        } 

talve sea necesario hacer doble iteracion:

 Object.keys(resp).forEach( ( users ) => {
     Object.keys(users).forEach( ( user ) => {
                    this.usuarios.push( user );
                } );
      } );
  }

otra opcion es que uses Pipe

 this.getAllUsers().pipe(
            mergeMap(data => {
                this.listUsers = data;
                data.forEach((current: any) => {
                   listUsers.push(current);
                });
                return forkJoin(listUsers);
            })
        ).subscribe((response: any) => {
            this.usuarios = response;// o response[0]

        });
15
  • Hola ya utilze lo que me recomendaste, el 9 dic. 2019 a las 1:49
  • @OmarCuadrado y que tal funciono? el 9 dic. 2019 a las 1:50
  • en parte ya no tengo el error anterior pero tengo uno nuevo, lo cual me parece raro ...ERROR TypeError: "resp.forEach is not a function" me parece raro porque el codigo coloque un console.log para ver la respuesta y efectivamente me trae datos... el 9 dic. 2019 a las 1:51
  • public getAllUsuarios(): void { this.usuario.getAllUsers() .subscribe( (resp) => { console.log(resp); resp.forEach((user) => { console.log(user); this.usuarios.push(user); }); }, (err) => { console.log(metodo getAllUsuarios error ${err}); }); } el 9 dic. 2019 a las 1:51
  • 1
    Excelente bro con eso ya funciono :D +20000000000000000000000000 jjajajajja que dilema tanto enrollo para eso muchas gracias :D el 9 dic. 2019 a las 3:48

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.