HTTP Service call bind to HTML elements

Question

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>

please post the HTML template where you are binding, and post the .TS class as well. — Flightdoc5242, Dec 28 '18 at 15:22
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` ... — SeleM, Dec 28 '18 at 15:35
i have run the json server. on json server when i run the following it gives me full detail of patient. http://localhost:3000/patient-details?profile_no=1 — khushi, Dec 28 '18 at 15:37

score 0 · Answer 1 · answered Dec 28 '18 at 15:42

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}`);
}

answered Dec 28 '18 at 15:42

SeleM

9,310
5
32
51

@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 ? – SeleM Dec 28 '18 at 15:48
it is httpclient – khushi Dec 28 '18 at 15:52
@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. – SeleM Dec 28 '18 at 15:57
i tried re-running, same error. appriciate if you can give me other solutions. – khushi Dec 28 '18 at 16:03
it return same observable object Observable {_isScalar: false, source: Observable, operator: MapOperator} – khushi Dec 28 '18 at 16:05
@khushi Provide a stackblitz at least , remote debugging is a super-men feature :p. There's no "OTHER" solution, there's an issue with ur code :), the provided solution should work in normal cases. – – SeleM Dec 28 '18 at 16:07
@khushi and have a look here to know what I meant by should not give the same console : https://stackoverflow.com/questions/36395252/how-to-get-data-from-observable-in-angular2 – SeleM Dec 28 '18 at 16:11
thanks will look into it. this is my first post on stackoverflow. what do you mean by stackblitz? i appreciate all your help for remote debugging. – khushi Dec 28 '18 at 16:14
how do you i upoad my existing code in stackblitz.com – khushi Dec 28 '18 at 16:26
i am done with uploading my code to stackblitz. how do i run the json server in that? – khushi Dec 28 '18 at 17:12
This seems to be the link to the *running* application instead of to the editor with the code so we can see? – DeborahK Dec 28 '18 at 21:47
The error I see in the stackblitz is: `The selector "app-root" did not match any elements`. – DeborahK Dec 28 '18 at 21:48
https://stackblitz.com/edit/angular-lpatyh please help me on this now. i dont have idea how i would run json server on stackblitz – khushi Dec 31 '18 at 15:57
Creating a stackblitz to help resolve your issue is meant to just SHOW YOUR ISSUE. Not provide all of your code. Otherwise it is quite time consuming for us to try to find your issue in all of this code. – DeborahK Dec 31 '18 at 19:31

score 0 · Answer 2 · answered Dec 28 '18 at 21:53

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.

answered Dec 28 '18 at 21:53

DeborahK

57,520
12
104
129

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 ? – SeleM Dec 28 '18 at 22:26
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. – DeborahK Dec 28 '18 at 23:04
The solution by DeborahK worked partially. but now the code is returning empty array. – khushi Dec 31 '18 at 14:59
this is what my json server returns with the query http://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 +" } ] – khushi Dec 31 '18 at 15:01

HTTP Service call bind to HTML elements

2 Answers2