Variable isnt displaying in console log outside of function in angular

I am trying to use a variable in another function to create a map marker using angular. i got the data to be stored in the function and display on the console within one function however when using the data in another function it does not work:

component.ts:

    import { HttpClient } from '@angular/common/http';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DAFormFac } from 'src/app/models/daformfac.interface';
import { DaformfacserviceService } from 'src/app/service/daformfacservice.service';
declare const L: any;
import { MocMapService } from 'src/app/service/moc-map.service';
import { map as MapData } from 'rxjs';

@Component({
  selector: 'app-daform-fac-view-full',
  templateUrl: './daform-fac-view-full.component.html',
  styleUrls: ['./daform-fac-view-full.component.css'],
})
export class DaformFacViewFullComponent implements OnInit {
  daformfac: DAFormFac[] = [];

  formID: string;
  getparamformid: any;
  daformfacs: any;

  latitude: any;
  longitude: any;

  private map: L.Map;
  constructor(
    private daformfacservice: DaformfacserviceService,
    private route: ActivatedRoute,
    private mapService: MocMapService,
    private http: HttpClient,
  ) {}

  ngOnInit(): void {
    console.log(
      this.route.snapshot.paramMap.get('facviewid'),
      ' : ID of report'
    );
    this.getparamformid = this.route.snapshot.paramMap.get('facviewid');
    this.daformfacservice
      .getOneDAFacForm(this.getparamformid)
      .subscribe((daFormFac: DAFormFac) => {
        this.daformfacs = daFormFac;
        console.log(daFormFac, 'response of form');
        this.latitude =  daFormFac['latitude'];
        this.longitude = daFormFac['longitude'];

        console.log(this.latitude, this.longitude, "cords")
      });
    let map = L.map('map').setView([10.536421, -61.311951], 8);
    L.tileLayer(
      'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
      {
        attribution:
          'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken:
          'pk.eyJ1IjoiZGlsbG9uciIsImEiOiJjbDB6MGdlbW8xNnZuM2lqbmJnNWZkNzY0In0.cfAOIAy5foQsoUlHhpYSjQ',
      }
    ).addTo(map);
    var marker = L.marker([this.latitude, this.longitude]).addTo(map);
    console.log(this.latitude, this.longitude, "in marker")
    //10.1896062, -61.5282025
    //this.latitude, this.longitude
  }
}

Service:

getOneDAFacForm(id: string) {
    return this.http.get<any>("http://localhost:3000/DAFacility/"+id)
    .pipe(map((res:any)=>{
      return res;
    }))
  }

This function gets the data entry and stored 2 variables latitude and longitude:

this.daformfacservice
          .getOneDAFacForm(this.getparamformid)
          .subscribe((daFormFac: DAFormFac) => {
            this.daformfacs = daFormFac;
            console.log(daFormFac, 'response of form');
            this.latitude =  daFormFac['latitude'];
            this.longitude = daFormFac['longitude'];
    
            console.log(this.latitude, this.longitude, "cords")
          });

and it results in

however when trying to access the data outside the function the console is blank.

var marker = L.marker([this.latitude, this.longitude]).addTo(map);
console.log(this.latitude, this.longitude, "in marker")

It does not display and is not accessible. what should i do?

Answer

You are calling the this.latitude and this.longitude variables before the api call return the data. Please try with below

 this.daformfacservice
  .getOneDAFacForm(this.getparamformid)
  .subscribe((daFormFac: DAFormFac) => {
    this.daformfacs = daFormFac;
    console.log(daFormFac, 'response of form');
    this.latitude =  daFormFac['latitude'];
    this.longitude = daFormFac['longitude'];
    console.log(this.latitude, this.longitude, "cords")
    addMarker(); // called marker for map position
  });

Here I called addMarker after the api call success.

addMarker() {
  var marker = L.marker([this.latitude, this.longitude]).addTo(map);
  console.log(this.latitude, this.longitude, "in marker");
}

Advertisement

Answer