Unable to loop array of objects in angular6 - arrays

Question

I'm trying to fetch movie data from omdbapi but i'm not getting able to print this value in html
.ts
import { Component, } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private _httpClient: HttpClient) {}
results: any = [];
getMovies(title) {
`enter code here`
this._httpClient.get("http://www.omdbapi.com/?apikey=d5dc2a5a&s=" + title)
.subscribe((data) => {
this.results = data;
//this.results.Search;
console.log(this.results)
})
}
}
Console value

Answer 1

You're probably using *ngFor in your template on results. But since you're assigning data to results and data is an Object, it's giving an error as *ngFor assumes an iterative Data Structure.
As can be seen from your Screenshot, there's a Search array on your data.
Change this.results = data; to this.results = data.Search;
import { Component } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private _httpClient: HttpClient) {}
results: any = [];
getMovies(title) {
this._httpClient.get("https://www.omdbapi.com/?apikey=157f9eb7&s=" + title)
.subscribe((data: any) => {
this.results = data.Search;
console.log(this.results);
})
}
ngOnInit() {
this.getMovies('The Dark Knight');
}
}
Here's a Sample StackBlitz for your ref.

Answer 2

You can achieve this using keyvalue pipe as below:
<div *ngFor="let item of results | keyvalue">
<b>{{item.key}}</b> : <b>{{item.value}}</b>
</div>

Answer 3

You are getting an object in your response. You need use ? operator in *ngFor loop like this to get array for asynchronous http service.
<ul>
<li *ngFor="let result of results?.Search">{{result.Title }}</li>
</ul>
and you can display totalResults like this :
<span>Total: {{results?.totalResults}}</span>