Angular http get JSON values, with ID-CodePudding

I'm trying to display JSON response with id, how do i display specific values?

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.getProblem("6154517d04dc7ac70253e2a8");
}

getProblem(id: any){
this.problemService.get(id)
.subscribe((data: any) => {this.services = data.services;
  
  console.log(data);

});
}

im getting the console.log(data):

{_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

when im trying to show values, for serviceProblem, solution etc. im getting nothing and its not showing anything in my ngFor

HTML:

<ul >
  <li *ngFor="let problem of services"> {{problem.serviceProblem}} </li>
  <li></li>
</ul>

i want to only show single value for instance: value of serviceProblem, solution, etc.

CodePudding user response：

Typo

this.problemService.get(id).subscribe((data: any) => {
  this.services = data.services; // -> this should be 'data'
  console.log(data);
});

CodePudding user response：

In the console.log(data), there is no services object, please check the output from your http end point