title: How to Access data outside of Function - Angular/Javascript
body: <p>I'm loading in data from another file(component) and when I console it from within a function so after an event it works:</p>
  
  <pre><code>  updateSub(data) {
    console.log('attempting to print the subsid array' + 
    this.engagementService.orgSubSidNames)
    }
  </code></pre>
  
  <p>When I try to call out outside of this and outside of scope but within my ngOnit 
  it consoles empty:</p>
  
  <pre><code>console.log('attempting to print the subsid array initially' + 
  this.engagementService.orgSubSidNames)
  </code></pre>
  
  <p>All of the code is included within my ngOnit.
  I have also included engagementService in my constructor, thats how i am accessing it: </p>
  
  <pre><code> 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)
  
   } 
   }
  </code></pre>
  
  <p>In Engagement service I make the http call like so:</p>
  
  <pre><code>    organizationSubsidiaries(sfid: string) {
      const url = `${this.baseURL}/${ENDPOINTS.organizations}/${this.organization.id}/${ENDPOINTS.subsidiaries}`;
      return this.http.get(url).map(res =&gt; res.json());
    }
  </code></pre>
  
  <p>Then when the browser is loaded it is called like such and i create the array I want from the response:</p>
  
  <pre><code>        this.organizationSubsidiaries(id)
        .subscribe(data =&gt; {
  
          let subsidiaryNames = []
          data.forEach(sub =&gt; {
            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))
  
        });
  </code></pre>
  
  <p>So an example of another call using observables (what I might be missing) is here:</p>
  
  <pre><code>    allEngagementAreas(): Observable&lt;IBaseEngagement[]&gt; {
      const url = `${this.baseURL}/${ENDPOINTS.engagementAreas}`;
      return this.http.get(url).map(res =&gt; res.json() as IBaseEngagement[]);
    }
  </code></pre>
  
  <p>The array I have I want to display in the UI.</p>
  
  <p>What can I do?</p>