Error trying to diff '[object Object]'. Only arrays and iterables - django

Question

i dont know why i get this error. It is in AppComponent.html:4
Error trying to diff '[object Object]'. Only arrays and iterables are allowed
app.component.html
<h2>Movies</h2>
<ul>
<li *ngFor='let movie of movies'>
<h2>{{movie.title}}</h2>
</li>
</ul>
app.component.ts
import {Component} from '#angular/core';
import {ApiService} from './api.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ApiService]
})
export class AppComponent {
movies = [{title: 'test'}];
constructor(private api: ApiService) {
this.getMovies();
}
getMovies = () => {
this.api.getAllMovies().subscribe(
data => {
this.movies = data;
},
error1 => {
console.log('error');
}
);
};
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {HttpClientModule} from '#angular/common/http';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is the service
import { Injectable } from '#angular/core';
import {HttpClient, HttpHeaders} from '#angular/common/http';
import {Observable} from 'rxjs';
#Injectable({ providedIn: 'root' })
export class ApiService {
baseurl = "http://127.0.0.1:8000"; httpHeader = new HttpHeaders({'Content-Type': 'application/json'});
constructor(private http: HttpClient) {}
getAllMovies(): Observable<any>
{
return this.http.get(this.baseurl + '/movies/', {headers: this.httpHeader});
}
}
Can you tell me what im doing wrong?

Answer 1

When using *ngFor you can only use arrays / iterables, what I can imagine is happening here is your API call is returning an object. You should find a way to change this to an array for your existing template to work. Providing what your response looks like should help with that.
For the mean while what you could do is use the keyvalue pipe. Which would make your code look like so.
<h2>Movies</h2>
<ul>
<li *ngFor='let movie of movies | keyvalue'>
<h2>{{movie.title}}</h2>
</li>
</ul>
After JSON was added
looking at the picture of your JSON (please try and use snippets rather than images) you could have. This means the above solution would not work amazingly but is something to remember as its useful for certain scenarios.
<h2>Movies</h2>
<ul>
<li *ngFor='let movie of movies.results'>
<h2>{{movie.title}}</h2>
</li>
</ul>
As the documentation will show, this will allow you to use *ngfor with an object as opposed to an array. This is part of commonModule.