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

Question

Stuck with error = Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Service code =

`export class PokemonServiceService {
    constructor(private http: HttpClient) { }

    get getCards(): Observable<ICards[]>{
    return this.http.get<ICards[]>('https://api.pokemontcg.io/v1/cards?')
        }
    }
 export interface Ability {
  name: string;
  text: string;
  type: string;
   }
export interface Attack {
  cost: string[];
  name: string;
  text: string;
  damage: string;
  convertedEnergyCost: number;
}
export interface Weakness {
  type: string;
  value: string;
}
export interface Resistance {
  type: string;
  value: string;
}
export interface Card {
  id: string;
  name: string;
  nationalPokedexNumber: number;
  imageUrl: string;
  imageUrlHiRes: string;
  types: string[];
  supertype: string;
   subtype: string;
   ability: Ability;
   hp: string;
   retreatCost: string[];
   convertedRetreatCost: number;
   number: string;
  artist: string;
  rarity: string;
  series: string;
  set: string;
  setCode: string;
  text: string[];
  attacks: Attack[];
  weaknesses: Weakness[];
  resistances: Resistance[];
  evolvesFrom: string;
 }
export interface ICards {
  cards: Card[];
}

Component code =

`export class MainActivityComponent implements OnInit {
 PokemonData: ICards[];
 constructor(private service: PokemonServiceService ){}
 ngOnInit(): void {
 this.service.getCards.subscribe(data => this.PokemonData = data);      
            }



}`

Html code =

`<div class="card" *ngIf="PokemonData">
<div class="card-header">Pokemon</div>
<div class="card-block">
  <table class="table table-hover">
      <thead>
          <tr>
              <th>Naam</th>
              <th>id</th>
              <th>hp</th>
              <th>pokedexnumer</th>

          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let d of PokemonData">      <!-- | async -->
              <td>{{d.name}}</td>
              <td>{{d.id}}</td>
              <td>{{d.hp}}</td>
              <td>{{d.nationalPokedexNumber}}</td>
          </tr>
      </tbody>
  </table>

)`

and if I use this in my component

ngOnInit(): void {
this.service.getCards()
            .subscribe(data => {
              console.log(data);
            })

then i get the data from the api (cards) , but if i try to sort them in a list i get this error = Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

The API doesn't actually return an array. It returns an object, which contains a property called cards, which is an array — user184994
– user184994, Commented May 19, 2018 at 17:31

user184994 · Accepted Answer · 2018-05-19 17:36:15Z

1

The API doesn't return an array, it returns an object with a cards property.

Change your service, like so:

get getCards(): Observable<ICards>{
    return this.http.get<ICards>('https://api.pokemontcg.io/v1/cards?')
}

You component like so:

PokemonData: ICards;

And your template like so:

<tr *ngFor="let d of PokemonData.cards">

answered May 19, 2018 at 17:36

user184994

18.3k2 gold badges51 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Inias Over a year ago

thanks for the help !! !!! changing <tr *ngFor="let d of PokemonData.cards"> fixed it :)

user184994 Over a year ago

@Inias Glad to help, please feel free to accept the answer if this has fixed your problem :)

Desu · Accepted Answer · 2018-05-19 17:37:07Z

0

What is your the output on logging the data? Maybe it's wrapped like this, try to unwrap it first.

The response

[{someData},{someData}]

Unwrap

function readData < T > (xhrData: any) {

  try {


    var len = Object.keys(xhrData).length;

    var temp: Array < T > = [];

    for (var x = 0; x < len; x++) {
      //unwrap it and transfer it to an array -
      temp[temp.length] = xhrData[x]; //example only
    }
  } catch (e) {
    return [];
  }


  return temp;
}

I like to wrap my reader on a try catch block to also catch error responses from the server if its not a JSON.

answered May 19, 2018 at 17:37

Desu

9101 gold badge13 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related