Parse an array of objects in Angular, display specific fields at the template

Question

I would like to know how I can treat arrays of objects in Angular 14.1 and dispaly them at my html template. Following example given where I get an array of Movie objects returned:

media.component.ts

import { Component, OnInit } from '@angular/core';
import {environment} from "../../environments/environment";
import {HttpClient} from "@angular/common/http";


export interface RecentlyAddedMoviesResponse {
  results: Array<object>;
}



@Component({
  selector: 'app-media',
  templateUrl: './media.component.html',
  styleUrls: ['./media.component.css']
})
export class MediaComponent implements OnInit {

  public recently_added_movies: any[] = []

  constructor(private http: HttpClient) { }


  ngOnInit(): void {
    this.http.get<RecentlyAddedMoviesResponse>(environment.backend + '/api/v1/movies/recently_added').subscribe((RecentlyAddedMovies) => {
      console.log(RecentlyAddedMovies);
      this.recently_added_movies = RecentlyAddedMovies.results;
    });
  }
}

When I now look at my browsers console I see an Array [ {…} ] that contains all nesessary information I want to render at my Angulars html template. But how can I access the title field for example? I know this is quite basic but im still not getting trough :(

If I now run trough the object of the array at my template like so:

      <div *ngFor="let movie of recently_added_movies">
        <h1>{{movie.title}}</h1>
      </div>

I get back nothing at the template, only at the console. Why that?

Thanks in advance

Syntax · Accepted Answer · 2022-09-13 11:13:57Z

0

You will neet to loop through your array in the template, which can be like this

<div *ngFor="let movie of recently_added_movies">
 {{movie.title}}
</div>

so, basically ngFor directive is all you need.

Update

Make sure the recently_added_movies array is correctly defined in the component script.

Example

interface Movie {title: string}

@Component()
class Movies implements OnInit {
  recently_added_movies: IMovie[] = [];
  constructor(private service: MovieService) {}
  ngOnInit(): void {
    this.service.getRecentlyAddedMovies()
        .subscribe(movies => this.recently_added_movies = movies);
  }
}

edited Sep 13, 2022 at 11:13

answered Sep 11, 2022 at 16:00

Syntax

1371 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user18726875 Over a year ago

When I try this.movies = RecentlyAddedMovies.results; I get back the following error: TS2322: Type 'object[]' is not assignable to type 'never[]'. Type 'object' is not assignable to type 'never'. Seems its unclear what the object type is somehow

Syntax Over a year ago

Have you tried to add this to the beginning of your script? typescript movies: any[] = []

user18726875 Over a year ago

I updated my question accordingly. No I did not, now it seems better

user18726875 Over a year ago

For some reson if I do console.log(this.recently_added_movies); I get back undefined at my browsers console ...?

Syntax Over a year ago

Basically, that's because the object has not been defined! I've updated the answer so you can see how the component code should look like.

Collectives™ on Stack Overflow

Parse an array of objects in Angular, display specific fields at the template

1 Answer 1

Update

Example

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

Example

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related