Home > Net >  Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor

Time:11-19

import { HttpClient } from '@angular/common/http';
import { Component, OnInit} from '@angular/core';
import { AnyArray } from 'mongoose';
import { DataService } from '../../services/data.service';





@Component({
  selector: 'app-allpatients',
  templateUrl: './allpatients.component.html',
  styleUrls: ['./allpatients.component.css']
})
export class AllpatientsComponent implements OnInit {
  
  dataArray:any
  constructor(private ds:DataService){
    this.ds.getAllPatients().subscribe(data=>this.dataArray=data);
   
  }

  
 
ngOnInit(): void{

}
}

///////////////////////////////////////////data.service.ts/////////////////////////

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http:HttpClient) {  }

  getAllPatients(){
    return this.http.get('http://localhost:3000/patients')
  }



 
}

////////////////////////////my html////////////////////////////

<tr *ngFor="let item of dataArray ">
                            <td>{{item.firstname}}</td>
                            <td>{{item.lastname}}</td>
                            <td>{{item.age}}</td>
                            <td>{{item.phone</td>
                            <td>{{item.email}}</td>

what should I change in my code I don't know why it keeps giving me the same error

CodePudding user response:

*ngFor works for only iterable items like arrays so dataArraycontains an object. Check what you receive when you call http://localhost:3000/patients

On the other hand, initialize dataArray with an empty array.

 dataArray:any = [];

*Update:

According the http response you've added when you call to get patients, you receive an object in data and with the key "patients" you access the array of patients:

constructor(private ds:DataService){ this.ds.getAllPatients().subscribe(data=>this.dataArray=data.patients); }

CodePudding user response:

{"patients":[{"_id":"6374db3de99156199a548845","firstname":"yassine","lastname":"azaiez","email":"[email protected]","age":23,"phone":92810192,"__v":0},{"_id":"6375045dd2eeac54c6ecb89b","firstname":"malik","lastname":"karim","email":"[email protected]","age":12,"phone":999999,"__v":0},{"_id":"637607be05816c5a7829130d","firstname":"alex","lastname":"karima","email":"[email protected]","age":12,"phone":999999,"__v":0},{"_id":"637607d105816c5a7829130f","firstname":"alex","lastname":"karima","email":"[email protected]","age":12,"phone":999999,"__v":0},{"_id":"63768732bc19c7bb581a24af","firstname":"malik","lastname":"azaiez","email":"[email protected]","age":18,"phone":97829101,"__v":0}],"user":null}

this is what I whant to display on my table except the element id I want to display the firstname, lastname, age,phone,email

  • Related