0

I am new to Angular and struck with subscribe method. I need to trigger subscribe first in which initialization of property is done. Please help me with this. Here is my code..

json.service.ts

@Injectable({providedIn: 'root'})
export class JsonService { 

constructor(private http: HttpClient) {}
//This fetch the json present in assets folder
url: string = `${window.location.origin}/assets/urls-list.json`;

getRestJson() {
this.http.get(url);
}

url.setting.ts

@Injectable({providedIn: 'root'})
export class UrlService {

fetchedJson: Array<any>;
constructor(private service: JsonService) {
 this.fetchingJsonFromService();
}

fetchingJsonFromService() {
 this.service.getRestJson().subscribe(
 response => {
 this.fetchedJson = response;
});
}

private static getValue(key: string) {
// use the key do some stuff with "this.fetchedJson" 
and return only that value back to getServiceUrl()

return something;
}

public static getServiceUrl(key:string) {
  const result = UrlService.getValue(key);
  return result;
}

}

  • From debugging this code realized that "getValue()" is called first and the "this.fetchedJson" is undefined. Then the call goes to "fetchingJsonFromService()" where fetchedJson gets initialized which is too late. Kindly help me to solve this issue. It would be of great help.

  • "getServiceUrl(key)" - is called by multiple services throughout the application

Thanks a lot!!

Neha Gunapooti
  • 21
  • 6
  • You do not show at the moment how the `getValue()` method is called. But you've almost answered your own question. If you wish to run the `getValue()` _after_ the `this.fetchedJson` is assigned a value asynchronously inside the subscription callback, then place the `this.getValue()` call _inside_ the subscription callback after the `this.fetchedJson = response;` statement. – ruth Feb 18 '22 at 09:50
  • Please go through [this canonical answer](https://stackoverflow.com/a/14220323/6513921) to understand more about asynchronous data. – ruth Feb 18 '22 at 09:52
  • Actually I didn't disclose the code getValue() is been called by other method along some parameter. So getValue() cannot be passed from async function.(like the arguments are in different method) – Neha Gunapooti Feb 18 '22 at 12:29
  • Now the question would be, how is the `getServiceUrl()` triggered? In any case you cannot ensure the async data `this.fetchedJson` would be available in `getValue()` function without adhering to the async paradigm introduced by the subscription. – ruth Feb 18 '22 at 12:36
  • getServiceUrl is called by multiple services through the application since it is supposed to parse the URL string for each of the services – Neha Gunapooti Feb 18 '22 at 12:42
  • In that case, since all these calls to `getServiceUrl()` depend on an async data, you'd ideally return the observable from this function and each call should subscribe on their own end to fetch the data. Also since there would be more than one subscription, you could use something like the [`shareReplay`](https://rxjs.dev/api/operators/shareReplay) operator to make the observable mulit-cast. So the future subscribers would get the last emitted value instead of triggering the source observable again. – ruth Feb 18 '22 at 12:49
  • @ruth I could solve this problem by triggering subscribe method in appModule level. By this we can load all the json as soon as application starts up and use it anywhere in the application. – Neha Gunapooti Feb 24 '22 at 10:42

1 Answers1

0

As getRestJson() is async you'll need to execute getValue() when it's response has arrived, which You can simply do by calling getValue() inside your fethcingJsomFromService()

fetchingJsonFromService() {
 this.service.getRestJson().subscribe(
 response => {
 this.fetchedJson = response;
 this.getValue();
});
}

private getValue() {
// do some stuff with "this.fetchedJson" and return only that value to other method
}
HassanMoin
  • 2,024
  • 1
  • 6
  • 16
  • Thanks a lot.. I have edited some part of the code. Since getValue() has some parameters and that is been passed on by public static method "getServiceUrl()".. That's the reason I'm struck – Neha Gunapooti Feb 18 '22 at 12:37