I'm following Devdactic's http tutorial and I can't tell if I'm misunderstanding the response or not executing something else correctly.
When I execute it, I keep getting an error within the browser attempting to render the array.
My ionic app says
<ion-item button detail lines="inset" *ngFor="let yourLeague of ( leagues | async)" >
{{ yourLeague.title }}
</ion-item>
The called api responds with an array that looks like this. Pretty confident the array is ok, I see that as a common problem out there.
results: Array(7)
0: {title: "A New Hope", episode_id: 4, opening_crawl: "It is a period of civil war.
↵Rebel spaceships, st…er
↵people and restore
↵freedom to the galaxy....", director: "George Lucas", producer: "Gary Kurtz, Rick McCallum", …}
1: {title: "Attack of the Clones", episode_id: 2, opening_crawl: "There is unrest in the Galactic
↵Senate. Several t…THE REPUBLIC
↵to assist the overwhelmed
↵Jedi....", director: "George Lucas", producer: "Rick McCallum", …}
2: {title: "The Phantom Menace", episode_id: 1, opening_crawl: "Turmoil has engulfed the
↵Galactic Republic. The t…ustice in the
↵galaxy, to settle the conflict....", director: "George Lucas", producer: "Rick McCallum", …}
3: {title: "Revenge of the Sith", episode_id: 3, opening_crawl: "War! The Republic is crumbling
↵under attacks by t…ate mission to rescue the
↵captive Chancellor....", director: "George Lucas", producer: "Rick McCallum", …}
4: {title: "Return of the Jedi", episode_id: 6, opening_crawl: "Luke Skywalker has returned to
↵his home planet of…
↵struggling to restore freedom
↵to the galaxy...", director: "Richard Marquand", producer: "Howard G. Kazanjian, George Lucas, Rick McCallum", …}
5: {title: "The Empire Strikes Back", episode_id: 5, opening_crawl: "It is a dark time for the
↵Rebellion. Although the… remote probes into
↵the far reaches of space....", director: "Irvin Kershner", producer: "Gary Kurtz, Rick McCallum", …}
6: {title: "The Force Awakens", episode_id: 7, opening_crawl: "Luke Skywalker has vanished.
↵In his absence, the …↵has discovered a clue to
↵Luke's whereabouts....", director: "J. J. Abrams", producer: "Kathleen Kennedy, J. J. Abrams, Bryan Burk", …}
length: 7
When I get the response, the console logs the above array and then prints the error.
Tab1Page.html:20 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
The ionic ts that is executing this looks like.
export class Tab1Page implements OnInit {
leagues: Observable<any> =;
constructor(private authService: AuthService, private router: Router, private http: HttpClient, private storage: Storage) {}
ngOnInit() {
this.leagues = this.http.get('https://swapi.co/api/films');
this.leagues.subscribe(data => {
console.log('my data: ', data);
});
}
}
The endpoint returns a JSONObject. You need to use the result array inside that JSONObject for your *ngFor.