I've been working on pulling data from an API and displaying it on a webpage.
Here is the JSON structure:
{page: 1, results: Array(20), total_pages: 832, total_results: 16629}
page: 1
results: Array(20)
0:
adult: false
backdrop_path: "/xDMIl84Qo5Tsu62c9DGWhmPI67A.jpg"
genre_ids: (3) [28, 12, 878]
id: 505642
original_language: "en"
original_title: "Black Panther: Wakanda Forever"
overview: "Queen Ramonda, Shuri, M’Baku, Okoye and the Dora Milaje fight to...
popularity: 7141.639
poster_path: "/sv1xJUazXeYqALzczSZ3O6nkH75.jpg"
release_date: "2022-11-09"
title: "Black Panther: Wakanda Forever"
video: false
vote_average: 7.5
vote_count: 2879
1
2
3
4
5
6
Component Setup
import { Component } from '@angular/core';
import { tap } from 'rxjs';
import { MovieDataService } from '../services/movie-data.service';
@Component({
selector: 'home-card',
templateUrl: './home-card.component.html',
styleUrls: ['./home-card.component.css']
})
export class HomeCardComponent {
movieData: any = {};
constructor(private movieDataService: MovieDataService) {}
ngOnInit(): void {
this.movieDataService.getData().subscribe((data) => {
this.movieData = data;
// Output JSON data to console
console.warn(data);
})
}
}
Template Markup
<ul>
<li *ngFor="let item of movieData.results | keyvalue">
Key: <b>{{item}}</b>
</li>
</ul>
The data renders successfully on the page as shown in the https://i.sstatic.net/H9Pb9.png.
However, when I attempt to access the title field of an object, I encounter the error: Property title does not exist on type KeyValue<unknown, unknown>.
This is how I'm trying to access the title field:
<ul>
<li *ngFor="let item of movieData.results | keyvalue">
Key: <b>{{item.title}}</b>
</li>
</ul>
I believe I may be overlooking something obvious, but after extensive research, I haven't been able to resolve it yet.