Cannot find a differ supporting Object '[Object Object]' of type 'Object'. Ngfor only Supports Binding to Iterables such as Arrays

Asked

Viewed 578 times

0

Good morning, I am trying to list data from an API and this error is occurring:

inserir a descrição da imagem aqui

Someone could help me, I’m not able to solve, follow the codes:

HTML code:

<div>
<mat-list>
    <mat-list-item *ngFor="let p of crushes$ | async">
        <h3 matline>Nome: {{p.nome}} - Apelido: {{p.apelido}}</h3>
        <p matline>Whatsapp: {{p.whatsapp}}</p>
        <p matline>Observações: {{p.observacoes}}</p>
        <p matline>Foto: {{p.foto}}</p>
        <p matline>Nota: {{p.nota}}</p>
        <p matline>Data Inclusão: {{p.createdAt}}</p>
    </mat-list-item>
</mat-list>

TS code:

export class SwitchMergeComponent implements OnInit {
  
  @ViewChild('searchBy', { static: true }) el: ElementRef;
  
  searchInput: string = '';
  crushes$: Observable<Crush[]>;
  
  constructor(private http: HttpClient) { }
  
  private readonly url: string = 'http://localhost:5000/api/find/';
  
  ngOnInit() {   
    this.secondOption();
  }
  
  filterPeople(searchInput: string): Observable<Crush[]> {
    if (searchInput.length === 0) {
      return of([]);
    }
    else {
      return this.http.get<Crush[]>('${this.url}${this.searchInput}');
    }
  }
  
  secondOption() {
    let keyup$ = fromEvent(this.el.nativeElement, 'keyup');
    this.crushes$ = keyup$.pipe(mergeMap((e) => this.filterPeople(this.searchInput)));
  }
}

Return API when shown on console:

inserir a descrição da imagem aqui

angular

  • And where is giving the console log. to return this data?

  • in the posted code does not have the console version.log I will post below: secondOption() { fromEvent(this.el.nativeElement, 'keyup') . subscribe(u) => { this.filterPeople(this.searchInput).subscribe((r) => console.log(r)) }); }

  • Guy like that just seeing the code I couldn’t identify the problem, just debugging even to test.

1 answer

0

Is there any way to put in stackblitz? I couldn’t identify the problem just by looking at

But try to put JSON.parse(return JSON) as shown below. If it doesn’t work try the second option with JSON.parse(JSON.stringify(return))

option 1 

secondOption() {
    let keyup$ = fromEvent(this.el.nativeElement, 'keyup');
    this.crushes$ = keyup$.pipe(mergeMap((e) => this.filterPeople(JSON.parse(this.searchInput)))));
  }

second option

  secondOption() {
        let keyup$ = fromEvent(this.el.nativeElement, 'keyup');
        this.crushes$ = keyup$.pipe(mergeMap((e) => this.filterPeople(JSON.parse(JSON.stringify((this.searchInput))))));
      }

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.