To get data from service to my component

Question

I have my service as PortAllocationService below

@Injectable({
  providedIn: 'root'
})
export class PortAllocationService {
  businessSwitchName: any;businessSwitchIp: any;businessSwitchportName: any;
  businessSwitchNodeId: any;routerName: any;routerIp: any;routerDetailsportName: any;
  routernodeID: any;aggSwitchName: any;aggSwitchPort: any;aggNodeIP: any;
  aggNodeId: any;serviceName: any;convertorDetails: any;handoffPort: any;qosLoopingPort: any;

  constructor(private http:HttpClient) { }

  portService(da){
    return this.http.post(url.portAllocationUrl , da).
    subscribe ((response:any) => {
      //Port Allocation response is mapped here
      console.log(response);
      // businessSwitchDetails 
      this.businessSwitchName = response.businessSwitchDetails.nodeName;
      this.businessSwitchIp = response.businessSwitchDetails.nodeIP;

     });

  }

and my component as below

export class WimaxFormComponent {
  data : any = {};
  btsIp :any; vCategory:any;nVlan:any;
 businessSwitchName:any;businessSwitchIp:any;businessSwitchportName:any;
 routerName:any;routerIp:any;aggSwitchName:any;aggSwitchPort:any;
 routerDetailsportName:any;routernodeID:any;aggNodeIP: any;aggNodeId: any;
 businessSwitchNodeId: any;serviceName: any;convertorDetails: any;
 handoffPort: any;qosLoopingPort: any;
 serviceId: any;serviceType: any;customerName: any;
 vReservedValue:boolean;cVlan: string;sVlan: any;
 path: string;

   constructor(
  private service: PortAllocationService){

  }

onChange(){

  let portAllocationData = {
  "serviceAttribute": {
    "serviceType": this.serviceType,
    "category": "category",
    "name": this.serviceId
  },
  "btsIp": this.btsIp
}
console.log(portAllocationData);

  this.service.portService(portAllocationData);
}

When i call the onChange function the call is made to service and we get the response from server . But i want to access all variable values from my service to Component like for example i have tried in constructor and onChange both as

this.businessSwitchName = service.businessSwitchName // this is coming as undefined

Could you please let me know how to access the variable values into component.

Well Have a look at [this](https://stackoverflow.com/a/51007085/5695162) and [this](https://stackoverflow.com/a/50964697/5695162) — Vikas, Jun 27 '18 at 18:06
Hey , I am not getting this concept of BehaviourSubject . Could you please implement it on the basis of the code above in my question . It will be very helpful. Thanks — ImRaN JB, Jun 28 '18 at 06:24

Nicholas Reynolds · Answer 1 · 2018-06-27T18:06:27.207

1

Rather than subscribing to the API call in the service itself, I would simply return the observable made by http.post(). And then move the subscribe to the component itself:

Service:

portService(da){ return this.http.post(url.portAllocationUrl , da) });

Component:

this.service.portService(portAllocationData).subscribe(response => {
    // Do stuff with the response here
});

However, if you really want to keep the variables in the service, I would put the API call in the constructor of the service, change the fields in the service to start with an underscore (or some other local/private identifier) and then have get methods for each variable you want to be able to access.

Service:

get businessSwitchName() {
    return this._businessSwitchName;
}

Component:

this.service.businessSwitchName

edited Jun 27 '18 at 18:06

answered Jun 27 '18 at 17:46

Nicholas Reynolds

333
1
15

I have kept in service because i want to use that value of variables in other components too. – ImRaN JB Jun 27 '18 at 17:51
@ImRaNJB, I added an explanation for how to access the data from the service. – Nicholas Reynolds Jun 27 '18 at 18:11
How will i implement my API call in constructor of my service?? – ImRaN JB Jun 27 '18 at 18:53
@ImRaNJB, I suggested moving the API call to the constructor simply to prevent from needing to explicitly call the API method... just saves a step. However, I see you pass in an object to the API call. So you may just need to explicitly call the API method anyway (like you currently are). But the rest of the answer still applies! – Nicholas Reynolds Jun 27 '18 at 19:04
@ Nicholas ,I have tried the way you have told but still the businessSwitchName is coming undefined because before the http request/response is completed the code of getting businessSwitchName gets executed and it set it as Undefined – ImRaN JB Jun 27 '18 at 19:12
@ImRaNJB, then that is an implementation issue. You will have to find a way to ensure the API call is finished before calling the methods to return the data. One way you could do it is to play around with BehaviorSubjects in the service and subscribe to the value in the component when it changes: http://reactivex.io/rxjs/manual/overview.html#behaviorsubject – Nicholas Reynolds Jun 27 '18 at 19:31
Hey , I am not getting this concept of BehaviourSubject . Could you please implement it on the basis of the code above in my question . It will be very helpful. Thanks – ImRaN JB Jun 28 '18 at 06:22

To get data from service to my component

1 Answers1