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 may help you — Sameer
– Sameer, Commented Jun 15, 2020 at 3: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
– CodeMind, Commented Jun 15, 2020 at 4:26
@CodeMind I just added my console print out what i get from the API. May you take a look? — nathannewyen
– nathannewyen, Commented Jun 15, 2020 at 5:38

YogendraR · Accepted Answer · 2020-06-15 05:48:20Z

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, 2020 at 5:48

YogendraR

2,41616 silver badges19 bronze badges

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

3 Comments

nathannewyen Over a year ago

Thank you It fixed my problem. But somehow it's not showing all my playlists from spotify...

YogendraR Over a year ago

Welcome !! That you will need to debug from back end, that what response you are getting back from Spotify API

nathannewyen Over a year ago

really appreciate your help and i jus fixed my back end problem. I wish i can upvote 10 times for your comment.

CodeMind · Accepted Answer · 2020-06-15 06:03:23Z

2

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);
  });
}

answered Jun 15, 2020 at 6:03

CodeMind

6461 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related