CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic4
Ahmed Wagdi
Ahmed Wagdi

Reputation: 4421

Trying to access data from get request i get Cannot find a differ supporting object '[object Object]' of type 'object'

I've found a few other questions for the same problem but none helped.

here are my list.page.ts 

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

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


  private selectedItem: any;
  private icons = [
    'flask',
    'wifi',
    'beer',
    'football',
    'basketball',
    'paper-plane',
    'american-football',
    'boat',
    'bluetooth',
    'build'
  ];
  public items: Array<{ title: string; note: string; icon: string }> = [];
  fostan: Observable<any>;

  constructor(public httpClient: HttpClient){
  const httpOptions = {
headers: new HttpHeaders({
  'Content-Type':  'application/json',
  'Authorization': 'Basic ' + btoa('username:password')
})
}
this.fostan = this.httpClient.get('https://www.fostania.com/api/items/',httpOptions);
this.fostan.subscribe(data => {
  this.fostan = data;
console.log('my data: ', data);
})
}

  ngOnInit() {
  }
  // add back when alpha.4 is out
  // navigate(item) {
  //   this.router.navigate(['/list', JSON.stringify(item)]);
  // }
}

and here is how I tried to call it from the .html file

  <ion-list>
  <button ion-item *ngFor="let fos of fostan">
  title  {{ fos.title }}
  </button>
</ion-list>

But I get this error in my console :

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

So any idea on how to convert this result into an array to be able to access it from the HTML file?

Upvotes: 0

Views: 43

Answers (2)

Sam Denty
Sam Denty

Reputation: 4085

When the component mounts this.fostan is an observable, and so let fos of fostan happens on the observable.

You should move the subscription data to a new instance variable

eg.

  this.items = data;

  ...

  *ngFor="let fos or items"

Upvotes: 1

Abdessattar NOISSI
Abdessattar NOISSI

Reputation: 464

fostan is of type Observable, it is not an array :

Change the line : 

this.fostan = data;

By : 

this.items = data;

And 

<button ion-item *ngFor="let fos of fostan">

By :

<button ion-item *ngFor="let fos of items">

Upvotes: 2

Related Questions