0

I have a HTML page where i am displaying list of patient. (list called from service call to json server). when user clicks on a patient,it should display the details of the page.

in the services 

getPatientList(): Observable<any> {
  return this.http.get<any[]>(endpoint).pipe(
  tap(data => console.log( JSON.stringify(data)))
 );
}

getPatientDetails(id: number): Observable<any> {
      return this.getPatientList().pipe(
      map((patient: any[]) => patient.find(p => p.profile_no === id))
      );
}

patient-details.ts

import { Component, OnInit, Input } from '@angular/core';
import { DataService } from '../services/data.service';
import { Router, ActivatedRoute } from '@angular/router';

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

  patient : any;
  pId: number;

  constructor(private data: DataService, private route: ActivatedRoute) { }
  ngOnInit() {


    this.data.getPatientDetails(this.pId).subscribe(
      patient => this.patient = patient);
    console.log(this.patient);
  }
}
console.log(patient) display following in console.


Observable {_isScalar: false, source: Observable, operator: MapOperator}

here is the part of HTML template

<div class="form-group child">
      <h1>{{patient.first_name}} {{patient.last_name}}</h1>
    <div class="col form-group form-control-md mt-5">
      <label for="profileNo" style="width:25%">Profile No: </label>
      <label></label>
      <input type="text" class="input-group-sm" [(ngModel)]="patient.profile_no"> 
    </div>  
    <div class="col form-group form-control-md">
      <label for="DOB" style="width:25%">Date of Birth: </label> 
      <input type="text" class="input-group-sm" [(ngModel)]="patient.DOB">
    </div> 
    <div class="col form-group">
      <label for="gender" style="width:25%">Gender: </label>
      <input type="text" class="input-group-sm"[(ngModel)]="patient.gender"> 
    </div>
    <div class="col form-group">
      <label for="bloodGroup" style="width:25%">Blood Group: </label>
      <input type="text" class="input-group-sm" [(ngModel)]="patient.blood_group"> 
    </div>
Improve this question
5
  • 2
    explain your problem Commented Dec 28, 2018 at 15:21
  • please post the HTML template where you are binding, and post the .TS class as well. Commented Dec 28, 2018 at 15:22
  • edited with html template and ts Commented Dec 28, 2018 at 15:35
  • Could you please tell, how's your Id is injected to the endpoint ? means if you try to test your service with a native consumer (e.g: postman), how'll pass that id ? : endpoint/id , endpoint?id=id ... Commented Dec 28, 2018 at 15:35
  • i have run the json server. on json server when i run the following it gives me full detail of patient. localhost:3000/patient-details?profile_no=1 Commented Dec 28, 2018 at 15:37

2 Answers 2

Reset to default
0

I think first two methods (services) should be refactored to :

getPatientList(): Observable<any> {
  return this.http.get<any[]>(`${endpoint}`);
}

And :

getPatientDetails(id: number): Observable<any> {
  return this.http.get<any[]>(`${endpoint}?profile_no=${id}`);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

@khushi, btw, and normally should not give the same error, if u'd subscribed on the service. Do you use Http or HttpClient in your class service ?
it is httpclient
@khushi Based on what u'd provided, should work, even if that doesnt work your console.log(patient) should not give Observable {_isScalar: false, source: Observable, operator: MapOperator}, verify , rerun ur server maybe.
i tried re-running, same error. appriciate if you can give me other solutions.
it return same observable object Observable {_isScalar: false, source: Observable, operator: MapOperator}
|
0

Welcome to Stack overflow!

One error in your code that I see is that you are trying to display a value before retrieving it.

This code:

  ngOnInit() {
    this.data.getPatientDetails(this.pId).subscribe(
      patient => this.patient = patient);
    console.log(this.patient);
  }

Should be this:

  ngOnInit() {
    this.data.getPatientDetails(this.pId).subscribe(
      patient => {
         this.patient = patient;
         console.log(this.patient);
      });
  }

The logging needs to be in the subscribe.

The subscribe tells your service to send an Http request. Immediately after submitting that request, displaying the value will always be undefined.

At some later point in time, the data is returned and the code within the subscribe is executed. So at this point, your patient data is set and you can log it.

Other than that, I'm not sure what you are having problems with.

If you could post the link to your stackblitz editing session (instead of to the running code), we could take a look and provide further assistance.

Improve this answer

4 Comments

The point here is that, he/she says the error is always Observable {_isScalar: false, source: Observable, operator: MapOperator} which does not make sens (for me at least), the issue you're trying to resolve should be undefined , ain't it ?
That does not look like an "error"? But you are right, if that is what displays in the console, it must be coming from somewhere other than the shown code.
The solution by DeborahK worked partially. but now the code is returning empty array.
this is what my json server returns with the query localhost:3000/patient-details?profile_no=1[ { "profile_no": 1, "first_name": "Jeanette", "last_name": "Penddreth", "DOB": "4/24/1990", "gender": "Female", "insurance_no": "INS7346", "blood_group": "B +" } ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.