Generating a new Observable from a callback function

Question

Generating a new Observable from a callback function

I am currently working on customizing an example from ngx-chips to fit my specific needs. The challenge I am facing involves adjusting the onRemoving method example provided:

public onRemoving(tag: TagModel): Observable<TagModel> {
        const confirm = window.confirm('Do you really want to remove this tag?');
        return Observable
            .of(tag)
            .filter(() => confirm);
    }

My goal is to replace windows.confirm with a custom component that features an AskQuestion method defined as follows:

AskQuestion(question: string, yesCallback: () => void, noCallback?: () => void): void {

The challenge lies in having multiple callbacks, whereas the ngx-chips components expect the method to return an observable. To resolve this, I attempted to convert the callbacks into observables using the bindCallback method:

 public onRemoving(tag: TagModel): Observable<TagModel> {

    const choiceCallback = (choice: boolean): TagModel=> {
      if (choice)
        return tag;
    };

    this.questionService.AskQuestion("Remove item?", () => choiceCallback(true), () => choiceCallback(false))

    return Observable.bindCallback(choiceCallback);
  }

However, it seems like I might be making a mistake in my approach. Any suggestions or ideas?

javascript angular typescript rxjs

Answer 1

Answer №1

The purpose of the bindCallback() function is:

Provide a function f with parameters x and callback, and it will return a new function g. When invoked as g(x), it will generate an Observable output.

Your current application of choiceCallback() does not align with this definition. It does not create a function that yields an observable result.

To correct this issue, consider using the Observable constructor instead:

public onRemoving(tag: TagModel): Observable <TagModel> {

  return Observable.create(observer => {
    const choiceCallback = (choice: boolean) => {
      if (choice) {
        observer.next(tag);
      }
      observer.complete();
    };

    this.questionService.AskQuestion("Remove item?", () => choiceCallback(true), () => choiceCallback(false));
  });
}

Answer 2

The purpose of the bindCallback() function is:

Provide a function f with parameters x and callback, and it will return a new function g. When invoked as g(x), it will generate an Observable output.

Your current application of choiceCallback() does not align with this definition. It does not create a function that yields an observable result.

To correct this issue, consider using the Observable constructor instead:

public onRemoving(tag: TagModel): Observable <TagModel> {

  return Observable.create(observer => {
    const choiceCallback = (choice: boolean) => {
      if (choice) {
        observer.next(tag);
      }
      observer.complete();
    };

    this.questionService.AskQuestion("Remove item?", () => choiceCallback(true), () => choiceCallback(false));
  });
}

Answer 3

Answer №2

Although I haven't worked extensively with this specific stack, it seems like the function bindCallback in this context is designed to return a function that generates an Observable object (refer to documentation for more information).

Therefore, you may need to invoke this function in order to obtain an Observable and include it in your return statement.
Given that the function signature specifies that it will return an Observable type.

You could experiment by substituting the current return statement with:

return Observable.bindCallback(choiceCallback)()

Answer 4

Although I haven't worked extensively with this specific stack, it seems like the function bindCallback in this context is designed to return a function that generates an Observable object (refer to documentation for more information).

Therefore, you may need to invoke this function in order to obtain an Observable and include it in your return statement.
Given that the function signature specifies that it will return an Observable type.

You could experiment by substituting the current return statement with:

return Observable.bindCallback(choiceCallback)()

Generating a new Observable from a callback function

Answer №1

Answer №2

Similar questions

The animation is not updating quickly enough

What is the best way to access the property from the outcome of the jwt.verify() function that has been previously generated

Troublesome situation encountered when trying to implement React Native/Xcode Release using Typescript

What is the process for generating a collection of objects in a Mongoose Model?

Can a collapse that was saved in a separate file be displayed on the requested page?

Is there a way to set up the application that consumes an npm module with a private git url to strictly utilize files exclusively from the module's dist folder?

When attempting to retrieve a data object using a Vuex action, I encounter an "Uncaught (in promise) TypeError" when trying to access the data within the object

Encountering an Unexpected Token in Angular 15, API 29 App

Is there a way to programmatically emulate Firebug's inspect element feature using JavaScript?

Tips for effectively dividing a component's code into smaller sub-components

Relationship between Angular Components - Understanding the Connection

The outcome of a Wordpress AJAX submission redirects to the admin-ajax.php file rather than appearing in the designated content

The process in mocha does not execute when using await

secure usage of template variables in Tornado web tornado web template variable pipe safety

A recursive function in Javascript that utilizes promises

Adding a row at a specific position in an AG Grid with Angular 7: A step-by-step guide

How can I utilize target.event to close the dropdown in Vuejs when clicked outside of it?

Can you merge multiple req.body requests?

Utilizing a function upon page initialization in VueX

Exploring Node.js: Uncovering the Secrets of Checking Dependency Versions