How to Access data outside of Function - Angular/Javascript

Question

I'm loading in data from another file(component) and when I console it from within a function so after an event it works:

  updateSub(data) {
  console.log('attempting to print the subsid array' + 
  this.engagementService.orgSubSidNames)
  }

When I try to call out outside of this and outside of scope but within my ngOnit it consoles empty:

console.log('attempting to print the subsid array initially' + 
this.engagementService.orgSubSidNames)

All of the code is included within my ngOnit. I have also included engagementService in my constructor, thats how i am accessing it:

 export class EngagementFilterComponent implements OnInit {

 constructor(private builder: FormBuilder, public engagementService:
 EngagementService) { }

 ngOnInit(): void {

 console.log('attempting to print the subsid array initially' + 
 this.engagementService.orgSubSidNames)

 } 
 }

In Engagement service I make the http call like so:

    organizationSubsidiaries(sfid: string) {
    const url = `${this.baseURL}/${ENDPOINTS.organizations}/${this.organization.id}/${ENDPOINTS.subsidiaries}`;
    return this.http.get(url).map(res => res.json());
  }

Then when the browser is loaded it is called like such and i create the array I want from the response:

        this.organizationSubsidiaries(id)
      .subscribe(data => {

        let subsidiaryNames = []
        data.forEach(sub => {
          console.log(sub.SubsidiaryName)
          subsidiaryNames.push(sub.SubsidiaryName)
        })
        subsidiaryNames = subsidiaryNames.filter(this.onlyUnique);
        this.orgSubSidNames = subsidiaryNames;
        console.log('data from subsidiaries' + JSON.stringify(this.orgSubSidNames))

      });

So an example of another call using observables (what I might be missing) is here:

    allEngagementAreas(): Observable<IBaseEngagement[]> {
    const url = `${this.baseURL}/${ENDPOINTS.engagementAreas}`;
    return this.http.get(url).map(res => res.json() as IBaseEngagement[]);
  }

The array I have I want to display in the UI.

What can I do?

Oh so it's not going to just be there is it, because it reads the line before the data exists, so how would i then use the data and assign it? — Sparlarva
– Sparlarva, Commented Oct 10, 2018 at 7:35

Darshak Parikh · Accepted Answer · 2018-10-10 08:04:24Z

1

What you need is a way to let your component know when the API call is complete. To do this, you can return an observable from the service and subscribe it in the component.

For example, in your service, you can have:

public getOrgSubsidiaries(id) {
    return this.organizationSubsidiaries(id).map(data => {
        let subsdiaryNames = [];
        // your logic
        return subsdiaryNames;
    });
}

Then, inside your component, you can do:

ngOnInit(): void {
    this.engagementService.getOrgSubsidiaries(id).subscribe(data => {
        this.orgSubsidiaries = data;
    });
}

answered Oct 10, 2018 at 8:04

Darshak Parikh

1051 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sparlarva Over a year ago

It doesnt recognise 'id' in the component which is trying to subscribe to the first one

Darshak Parikh Over a year ago

Then you can just get rid of the parameter and call the method directly, and use the id in the service.

Sparlarva Over a year ago

the .map doesnt return anything by the way, .subscribe worked as previously but .map doesnt console anything

Sparlarva Over a year ago

Sure but it's exactly the same just with your function being used

Collectives™ on Stack Overflow

How to Access data outside of Function - Angular/Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related