Using a variable outside a subscribe callout

Question

So im developing an angular app and i want to acess a list of nodes that contain the latitude and longitude to put in a map. the way i get the object node is by a Service that basically getAll objects from my mongoDB database

retrieveNodes() {

this.nodeService.getAll()
  .subscribe(
    data => {
      this.nodes = data;
      console.log(data);
    },
    error => {
      console.log(error);
    });
    }

The variable this.nodes is declared as nodes:any; in the beggining

And then i have this where i use the information i get to put the coordinates

writeNodes() {
var summit = L.marker([this.nodes[0].latitude,this.nodes[0].longitude], {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [13, 41],
      iconUrl: 'leaflet/marker-icon.png',
      shadowUrl: 'leaflet/marker-shadow.png'
    })
  });

  return summit;
}

when i console.log(nodes[0].latitude) inside the subscribe i got the correct number but when i console.log in the second sample i got undefined.

PS: I run retrieveNodes() in onInit() method and thats the way i populate the variable this.nodes. also, i tested to put the retrieveNodes() as a function which returns a list and called in writeNodes() but i cant populate the list. only if im inside the data=>{

Thanks for the help

Does this answer your question? [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular) — R. Richards, Nov 28 '20 at 21:03
Hello R.Richards. i already did that. but i need to call a method to put nodes in a leaflet map. and i put the method inside the callback function i cant do that. my goal with this is return a list of nodes that countain(key,name,latitude,longitude) and get the latitude and longitude to call the leaflet L.marker to put the coordinates in a map — Nuno Marques, Nov 28 '20 at 21:11

score 0 · Accepted Answer · answered Nov 28 '20 at 22:21

You are already using a service that is returning an observable. So use that service to maintain the list of nodes. Do that by using the service constructor to retrieve all the nodes and store the Observable in an instance variable on the service itself.

This creates a single-source-of-truth for the nodes and allows you to only need to "writeNodes" within the OnInit() method.

This is what an AppComponent would look like:

export class AppComponent implements OnInit {
  name = 'Angular 5';
  nodeService: NodeService;
  summit;

  constructor(nodeService: NodeService) {
    this.nodeService = nodeService;
  }

  ngOnInit(): void {
    this.nodeService.nodes.subscribe((nodes) => {
      this.summit = nodes[0];
    });
  }
}

This is what the service would look like (the Node is mocked)

interface Node { latitude: number, longitude:number};

@Injectable()
export class NodeService {

  nodes: Observable<Node[]>;

  constructor() {
    this.nodes = this.getAllNodes();
  }

  getAllNodes(): Observable<Node[]> {
    return of([{latitude:1,longitude:2},{latitude:3,longitude:4}]);
  }
}

And finally, here is a StackBlitz with this working example:

https://stackblitz.com/edit/angular-hauax8?file=app/services/nodeService.ts

Using a variable outside a subscribe callout

1 Answers1