What is the best way to extract information from an observable and apply it in another function?

Question

What is the best way to extract information from an observable and apply it in another function?

I have a function that looks like this:

public getAssemblyTree(id: number) {

        ....

         const request = from(fetch(targetUrl.toString(), { headers: { 'responseType': 'json' }, method: 'GET' }));

                request.subscribe(
                    (response) => {
                        response.json().then(data => {
                            (this.parseAssemblyTree(data['flat_assembly_graph']));
                        }
                        )
                    }
                )

public updateAssemblyTree(id: number) {
            let res = this.getAssemblyTree(id)
            this.asmTree.next(res);
        }

I need the data returned once the observable completes by the first function to be stored in the variable "res" in the second function (public updateAssemblyTree(id: number)). Can someone provide guidance on how to achieve this? I am new to using observables, so having the code written out would greatly assist me. Thank you all for your help in advance :)

javascript angular typescript frontend observable

Answer 1

Answer №1

If you have a function called getAssemblyTree that returns an observable or promise, you can easily subscribe to it like this:

this.getAssemblyTree(id).pipe(takeUntil(this.componentDestroyed$))
.subscribe((response) => {
    if(response) {
        //implement your logic here.
    }
}).

The variable this.componentDestroyed is declared as

private componentDestroyed$ = new Subject<void>();

Don't forget to clean up in the ngOnDestroy method of your component:

this.componentDestroyed$.next();
this.componentDestroyed$.complete();

What's happening here is that your component will continue to react to changes in the getAssesmblyTree function as long as the component remains active. This approach works well with Observables or promises (you can convert a promise to an Observable using 'from').

Edit: For more advanced scenarios, consider using a store to manage state and subscribe to specific parts of it. This pairs nicely with async pipes.

Answer 2

If you have a function called getAssemblyTree that returns an observable or promise, you can easily subscribe to it like this:

this.getAssemblyTree(id).pipe(takeUntil(this.componentDestroyed$))
.subscribe((response) => {
    if(response) {
        //implement your logic here.
    }
}).

The variable this.componentDestroyed is declared as

private componentDestroyed$ = new Subject<void>();

Don't forget to clean up in the ngOnDestroy method of your component:

this.componentDestroyed$.next();
this.componentDestroyed$.complete();

What's happening here is that your component will continue to react to changes in the getAssesmblyTree function as long as the component remains active. This approach works well with Observables or promises (you can convert a promise to an Observable using 'from').

Edit: For more advanced scenarios, consider using a store to manage state and subscribe to specific parts of it. This pairs nicely with async pipes.

What is the best way to extract information from an observable and apply it in another function?

Answer №1

Similar questions

What is the best way to connect to a JSON key that is consistently returned with a varying or unpredictable name?

Exploring Angular's View Encapsulation with Third-Party Libraries

Unexpected INTERNAL error encountered with Firebase's Cloud Function update

Issue with Material UI: Style overrides for nested components are not being applied

Display or conceal list elements using Angular directives in the HTML

Iterate through the AJAX response and update each element that has a designated ID

Iron-localstorage in Polymer 2.0 now supports storing and managing two distinct arrays

Strategies for managing database modifications in a MEAN stack project

The functionality of jQuery's toggleClass is not functioning properly when clicking on a different thumbnail

Using JavaScript code to sift through and eliminate irrelevant data

I'm looking to integrate language switching into my Angular application with the help of the official Angular i18n library. How can I

Converting an array of strings into a JSON object using JavaScript

Angular2+ test case indicating lack of NgControl provider

The Kendo Date Picker is failing to update properly when the k-ng-model is modified

Tips for integrating AsyncGenerators with Kotlin/JS

The JSON GET method displays HTML content when accessed through code or console, but presents a JSON object when accessed through a web address

Merge the results of two MongoDB queries

A guide to organizing page components across multiple `/pages` directories in a Next.js application

Eliminating Angular's @Injectable decorator in npm build process

Dynamic horizontal scrolling