0

This is my first question in stackoverflow, even though I've been a user for many years. I'm relatively new to Angular and could see several answers to similar questions in this space, but I still coudn't get it working.

Sorry, if I'm duplicating the request. I'm subscribing some data and wish to assign and use it in local variable and process further.

ngOnInit() {
this.someMethod().subscribe(data => this.shuttleArea = data);
console.log('OUTER: '+JSON.stringify(this.shuttleArea));}

Following function fetches the data from a service.

someMethod(){
return this.catalogueService['getShuttleRoute']().pipe(map(data => {
  this.shuttleArea = JSON.parse('{"options":'+ JSON.stringify(data[0].value) +'}');
  console.log('INNER: '+ JSON.stringify(this.shuttleArea));
  return this.shuttleArea;
}));  }

I'm getting expected service response in console with INNER text. But when I consume it on oninit, console OUTER displays "undefined". My objective is not to display in console, but need to do additional calculations under oninit or someother sub function.

INNER, OUTER & console has been used to simplify the problem, and make the objective clear. Any help would be greatly appreciated.

Manu
  • 75
  • 7
  • 2
    You're logging the data before you get it. Log inside `subscribe`. – Frank Modica Nov 08 '18 at 15:06
  • I don't want to sound mean, but this is the basics of Javascript asynchronous calls. I suggest you to train with `Promise`s (which are native in JS since ES6) to see how it behaves. Also, Javascript is a rather special language, so you should get familiar with it before using frameworks for it. You can find very good tutorials on the internet, such as for instance [Udemy](https://www.udemy.com/) (the one I use myself, not promoting it over another !). Once the basics of JS are mastered, keep going with Typescript, then Angular. –  Nov 08 '18 at 15:12
  • Yes, that is right, I can access the data within `subscribe`. But I wish to have the data assigned to a local variable and perform further complex processing. – Manu Nov 08 '18 at 15:16
  • Right but you need to understand that `this.someMethod()` is asynchronous. So `this.someMethod()` runs. Then `console.log(...)` runs. And finally, at some point in the future, the function that you passed to `.subcribe(...)` runs. – Frank Modica Nov 08 '18 at 15:22
  • @Manu put INTO the function subscribe the console.log, out of the subscribe this.shuttle has no value. NOTE: I don't know because you use JSON.stringify (I supouse you want a json object not a string) – Eliseo Nov 08 '18 at 15:31
  • @Eliseo Thanks, I'm rebuilding the JSON `JSON.parse('{"options":'+ JSON.stringify(data[0].value) +'}')`, other `JSON.stringify` are used only for console logging. – Manu Nov 08 '18 at 16:53
  • @Manu, NO, you're using pipe(map(data)=>...return some diferent), that's change the response. If you want not change the response you must use pipe(tap(data)=> you can do what ever with the data) – Eliseo Nov 08 '18 at 17:33
  • @Eliseo Thanks. I managed to get it working. I've moved the whole calculation to the observable and managed to achieve what I've intended to achieve. – Manu Nov 09 '18 at 06:10
  • @FrankModica Thanks for your inputs and suggestions. – Manu Nov 09 '18 at 06:10

0 Answers0