Cannot find a differ supporting object '[object Object] in Angular 8

Question

I'm trying to get spotify API from current user's playlists I have it in my console but I tried to put it into html and i'm getting this error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.ngDoCheck (common.js:4841) at checkAndUpdateDirectiveInline (core.js:31913) at checkAndUpdateNodeInline (core.js:44367) at checkAndUpdateNode (core.js:44306) at debugCheckAndUpdateNode (core.js:45328) at debugCheckDirectivesFn (core.js:45271) at Object.eval [as updateDirectives] (PlaylistsComponent.html:2) at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259) at checkAndUpdateView (core.js:44271) at callViewAction (core.js:44637)

Here's my user.service.ts:

public getUserPlaylists(): Observable<any> {
  const endpoint = environment.spotifyApi.host + "me/playlists";

  const httpOptions = {
    headers: new HttpHeaders({
      Authorization: `Bearer ${this.accessToken}`,
    }),
  };

  return this.http.get(endpoint, httpOptions);
}

Here's my playlists.component.ts:

playlists: any;
constructor(private router: Router, private userService: UserService) {}

ngOnInit() {
  this.getPlaylists();
}

getPlaylists() {
  let observable = this.userService.getUserPlaylists();
  observable.subscribe((data) => {
    this.playlists = data;
    console.log(this.playlists);
  });
}

and here is my html:

<div class="playlists text-center">
  <div class="test" *ngFor="let playlist of playlists">
    {{playlist.name}}
  </div>
</div>

Update console from browser:

Object
href: "https://api.spotify.com/v1/users/12164174667/playlists?offset=0&limit=20"
items: Array(2)
0: {collaborative: false, description: "", external_urls: {…}, href: "https://api.spotify.com/v1/playlists/0tNJ7TiGOqqbiFratEY8WD", id: "0tNJ7TiGOqqbiFratEY8WD", …}
1: {collaborative: false, description: "Songs I'm currrently listening to; updated every 2 weeks.", external_urls: {…}, href: "https://api.spotify.com/v1/playlists/24G8qVxmH4Sg6WfsaRAumW", id: "24G8qVxmH4Sg6WfsaRAumW", …}
length: 2
__proto__: Array(0)
limit: 20
next: null
offset: 0
previous: null
total: 2
__proto__: Object

`ngFor` expects array, make sure `playlists` is an array. If you want to loop an object then this [answer](https://stackoverflow.com/a/51491848/11719787) may help you — Sameer, Jun 15 '20 at 03:23
this.playlists = data is the place where error occur. first check the respond that you getting from API. one of that property may contain your playlist as an Array. — CodeMind, Jun 15 '20 at 04:26
@CodeMind I just added my console print out what i get from the API. May you take a look? — nathannewyen, Jun 15 '20 at 05:38
https://stackoverflow.com/a/51286078/5114465 check this answer. — Shurvir Mori, Mar 03 '22 at 09:32

score 3 · Accepted Answer · answered Jun 15 '20 at 05:48

3

As you can clearly see in the logs that ngFor expects Iterables. Instead of assigning full object just assign items

Upate your method like this:

getPlaylists() {
 let observable = this.userService.getUserPlaylists();
 observable.subscribe((data) => {
 this.playlists = data.items;
 console.log(this.playlists);
 });
}

answered Jun 15 '20 at 05:48

YogendraR

2,144
12
17

Thank you It fixed my problem. But somehow it's not showing all my playlists from spotify... – nathannewyen Jun 15 '20 at 08:32
Welcome !! That you will need to debug from back end, that what response you are getting back from Spotify API – YogendraR Jun 15 '20 at 08:47
really appreciate your help and i jus fixed my back end problem. I wish i can upvote 10 times for your comment. – nathannewyen Jun 15 '20 at 09:00

score 2 · Answer 2 · answered Jun 15 '20 at 06:03

I went through Spotify API and found what it returns in playlist object. in external_urls node you can get required playlist url. then you can iterate this.playlists.

getPlaylists() {
  let observable = this.userService.getUserPlaylists();
  observable.subscribe((res) => {
    this.playlists = res.external_urls;
    console.log(this.playlists);
  });
}

Cannot find a differ supporting object '[object Object] in Angular 8

2 Answers2

Linked