无法循环在angular6中的对象数组

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>