I need help displaying specific values from a JSON response using an interface:
interface:
export interface problemSer{
serviceProblem: string,
causes: any,
name: string,
solution: any
}
service.ts:
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
get(id: any): Observable<problemSer[]> {
return this.http.get<problemSer[]>(`${baseUrl}/${id}`, this.httpOptions)
}
component.ts:
services: problemSer[]=[];
ngOnInit(){
this.displayProblem("6154517d04dc7ac70253e2a8");
}
displayProblem(id: any){
this.problemService.get(id)
.subscribe((data: any) => {this.services = data.services;
console.log(data);
});
}
Upon logging the data, the result will look like this:
{_id: '6154517d04dc7ac70253e2a8', serviceProblem: 'TESTESTEST', causes: Array(3), solutions:
Array(2), createdAt: '2021-09-29T11:43:57.627Z', …}
causes: (3) [{…}, {…}, {…}]
createdAt: "2021-09-29T11:43:57.627Z"
serviceProblem: "TESTESTEST"
solutions: (2) ['22222', '222222']
__v: 0
_id: "6154517d04dc7ac70253e2a8"
[[Prototype]]: Object
However, I am facing difficulties in displaying individual values such as serviceProblem and solution when using ngFor loop.
HTML:
<ul>
<li *ngFor="let problem of services"> {{problem.serviceProblem}} </li>
<li></li>
</ul>
I aim to showcase single values like serviceProblem and solution only.