im trying to get data from an API, ive come so far that i can get the data in controle.log and print it out with json. But, i cant get id, name,... from interface or class. I dont know why i cant get it. someone have a clue?
i have also tried movie[] class instead of IData[] but it doesnt make any diffrens.
export class MoviesService {
private showMovies = new Subject<IData[]>();
movies$ = this.showMovies.asObservable();
constructor(private http: HttpClient) { }
getServerData(){
this.http.get<IData[]>("https://medieinstitutet-wie-products.azurewebsites.net/api/products").subscribe((dataFromApi: IData[]) =>
this.showMovies.next(dataFromApi))
}
}
export class ShowmoviesComponent implements OnInit {
showMovies: IData [] = []
constructor(private service: MoviesService) { }
ngOnInit(): any {
this.service.movies$.subscribe((dataFromService: IData[]) => {
return this.showMovies = dataFromService,
console.log(dataFromService)
})
this.service.getServerData()
}
}
export class Movies{
id: string
name: string
description: string
price: string
imageUrl: string
year: string
added: string
productCategory: string
constructor(
id: string,
name: string,
description: string,
price: string,
imageUrl: string,
year: string,
added: string,
productCategory: string){
this.id = id
this.name = name
this.description = description
this.price = price
this.imageUrl = imageUrl
this.year = year
this.added = added
this.productCategory = productCategory
}
}
export interface IData{
id: string
name: string
description: string
price: string
imageUrl: string
year: string
added: string
productCategory: string
}
<div *ngFor="let m of showMovies">
{{ showMovies | json}}
</div>
CodePudding user response:
Try to replace your subject
by a BehaviorSubject
Also, you are using the ngFor in the wrong way. It should be:
<div *ngFor="let m of showMovies">
{{ m | json}}
</div>
To finish, don't forget to unsubscribe your observables:
In your case you can use take(1)
as you need the first ->
this.http.get<IData[]>("https://medieinstitutet-wie-products.azurewebsites.net/api/products").pipe(take(1).subscribe((dataFromApi: IData[]) =>
this.showMovies.next(dataFromApi))
}