Make sure to execute observables just once, and afterwards verify if they have finished - angular2 typescript

Question

Make sure to execute observables just once, and afterwards verify if they have finished - angular2 typescript

Completely new to the world of Observables, so please forgive me if this is a simple question. I've done some research online, but I can't seem to find the answer I'm looking for.

Take a look at this basic example on Plunker:
https://plnkr.co/edit/kgECPQyoKqY7RamebUUu?p=preview

I'm wondering why my Initialized method isn't being called until my service triggers it. I assumed that the initialized observable would kick in as soon as I use Observable.forkJoin. Do I need to initiate the process somehow?

Also, I can't figure out why the subscribe method in my myService.loadOtherData function doesn't seem to be getting called. Any insights into this would be greatly appreciated.

Thank you in advance!

javascript angular typescript observable

Answer 1

Answer №1

If you are new to Observables, it is recommended to begin with a simple example.

Here is an example in pseudo-code:

let observable = new Observable<string>(observer => {
  if (1 == 1) {
    observer.next("one equals one");
  } else {
    observer.error("one does not equal one");
  }
});
observable.subscribe(
  response => console.log(response), 
  error -> console.log(error)
);

You can also use a Subject which allows for more flexibility:

let subject = new Subject();
subject.subscribe(response -> console.log(response));
subject.next('hello');

I noticed that you were combining subscribing to the subject and retrieving data with an observable. Do these examples provide enough information or do you require a more specific demonstration?

edit:

Your this.initialized.subscribe 'initiates the process'. You are calling the loadOtherData function too late, causing you to miss the subscription to this.initialized when the data is returned. This is why you do not see console.log('initialized')

edit2:

Keep in mind that a BehaviorSubject retains its data and provides it upon subscription. You do not need to initialize it with an empty string.

Answer 2

If you are new to Observables, it is recommended to begin with a simple example.

Here is an example in pseudo-code:

let observable = new Observable<string>(observer => {
  if (1 == 1) {
    observer.next("one equals one");
  } else {
    observer.error("one does not equal one");
  }
});
observable.subscribe(
  response => console.log(response), 
  error -> console.log(error)
);

You can also use a Subject which allows for more flexibility:

let subject = new Subject();
subject.subscribe(response -> console.log(response));
subject.next('hello');

I noticed that you were combining subscribing to the subject and retrieving data with an observable. Do these examples provide enough information or do you require a more specific demonstration?

edit:

Your this.initialized.subscribe 'initiates the process'. You are calling the loadOtherData function too late, causing you to miss the subscription to this.initialized when the data is returned. This is why you do not see console.log('initialized')

edit2:

Keep in mind that a BehaviorSubject retains its data and provides it upon subscription. You do not need to initialize it with an empty string.

Make sure to execute observables just once, and afterwards verify if they have finished - angular2 typescript

Answer №1

Similar questions

Adding JSON data to an array for Flot Diagram

Retain the input values even after the page is refreshed

Is it possible to identify if an array is a polygon or multipolygon by examining its GeoJson data?

A guide on utilizing server-based data grouping and showcasing it in ag-grid within an angular environment

Displaying local PDF files with Vue.js - A comprehensive guide

Efficiently managing AJAX requests and handling form submissions

Dreamweaver restricts my ability to utilize JavaScript for coding

How can you incorporate AJAX to add a paragraph element to your HTML document?

Manipulating visibility of an input tag using JQuery

Form validation has not passed the necessary checks

Testing React Hook Form always returns false for the "isValid" property

Tips on applying border to unique marker icon in Angular2 using agm-marker

'Unlawful invocation' problem occurs while attempting to upload a file using ajax

Utilizing a single code base for both Web development with Angular 4 and Mobile app development with Ionic 3

How can I encode and decode a base64 string using AngularJS1 and TypeScript?

Tips for utilizing Jquery to manage a dropdown designed in button form

Append a constant string to the conclusion of the route parameter

Tips for accessing the post body within an express route

Keep the webpage current without the need to refresh it with a button click

Mastering the use of gl Scissor is essential for effectively implementing popups in your