Having trouble iterating through an array of objects in Angular6

Question

Having trouble iterating through an array of objects in Angular6

I'm having trouble fetching movie data from omdbapi and displaying it 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 output

arrays angular typescript observable angular6

Answer 1

Answer №1

It seems like you're experiencing an issue with the *ngFor directive in your Angular template, specifically with the results variable. The problem arises because you are assigning an Object to results instead of an iterable data structure.

Upon examining your screenshot, it appears that there is a Search array within your data.

To resolve this issue, modify the line from 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');
  }

}

For further clarification and demonstration, check out this Sample StackBlitz link.

Answer 2

It seems like you're experiencing an issue with the *ngFor directive in your Angular template, specifically with the results variable. The problem arises because you are assigning an Object to results instead of an iterable data structure.

Upon examining your screenshot, it appears that there is a Search array within your data.

To resolve this issue, modify the line from 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');
  }

}

For further clarification and demonstration, check out this Sample StackBlitz link.

Answer 3

Answer №2

To accomplish this task, you can utilize the keyvalue pipe in the following manner:

<div *ngFor="let entry of data | keyvalue">
   <b>{{entry.key}}</b> : <b>{{entry.value}}</b>
</div>

Answer 4

To accomplish this task, you can utilize the keyvalue pipe in the following manner:

<div *ngFor="let entry of data | keyvalue">
   <b>{{entry.key}}</b> : <b>{{entry.value}}</b>
</div>

Answer 5

Answer №3

If your response is an object, remember to use the ? operator in your *ngFor loop to access an array when working with asynchronous HTTP services.

<ul>
   <li *ngFor="let result of results?.Search">{{result.Title }}</li>
</ul>

To display the total number of results, you can do this:

<span>Total: {{results?.totalResults}}</span>

Answer 6

If your response is an object, remember to use the ? operator in your *ngFor loop to access an array when working with asynchronous HTTP services.

<ul>
   <li *ngFor="let result of results?.Search">{{result.Title }}</li>
</ul>

To display the total number of results, you can do this:

<span>Total: {{results?.totalResults}}</span>

Having trouble iterating through an array of objects in Angular6

Answer №1

Answer №2

Answer №3

Similar questions

Make sure to send individual requests in Angular instead of sending them all at once

Implementing validation logic on button click using TypeScript

What could be causing these Typescript compilation errors I am experiencing?

Creating a unique pattern using JavaScript code

"Implementing Ionic 2 tabs allows for retrieving the previously selected option with the

manipulate and organize document containing text

"What is the best way to prevent a button from being enabled in Angular if a list or array is not

Issues with data texture rendering in the most recent iteration of the third version

Angular 5 async-await issue causing unexpected behavior

Creating an object key using a passed literal argument in TypeScript

Creating sparse fieldset URL query parameters using JavaScript

The FaceBook SDK in React Native is providing an incorrect signature when trying to retrieve a token for iOS

The clash between angulartics2 and rxjs causing a dependency issue

Unlocking the potential of the search pipe in Angular 6

Best approach for removing elements from numpy arrays

Trouble with Playwright test loading local URL

Patterns for Spring Boot backend and Angular frontend designor Strategies for designing a Spring

Switch out every second instance of a specific character within a given string

"I am looking for a way to receive a response from a loopback in Angular7

Leveraging gulp to enhance the module namespace in the TypeScript output of various files