Angular and RxJS - Merging a promise and inner observable into a single observable for retrieval

After fulfilling a promise that creates and subscribes to an observable, I'm looking to convert this promise into an observable and return it for subscription elsewhere. This includes the inner observable as well. To achieve this, I initially tried using from to convert the promise and then used concatMap to chain the inner observable. Unfortunately, while working on the code, I encountered an error related to the xfdfString string variable fetched from the initial promise at the start of the concatMap. It seems like my new function's inner observable might not be returning an observable itself. Despite multiple attempts to fix this issue, I haven't had any success yet. Any suggestions or ideas would be greatly appreciated.

Error:

Argument of type '(xfdfString: string) => void' is not assignable to parameter of type '(value: string, index: number) => ObservableInput<any>'.
  Type 'void' is not assignable to type 'ObservableInput<any>'.ts(2345)

Original function:

  save() {
    const { annotManager } = this.wvInstance;
    annotManager.exportAnnotations({ links: false, widgets: false }).then(xfdfString => {
      const requestId = (<SignatureDocumentData>this.task.actionData).requestId;
      const data: SignDocument = { encodedDocument: encodeBase64(xfdfString) };

      this.documentService.signDocument(requestId, data)
        .pipe(
          switchMap(signResponse => this.workflowService.completeAction(this.task.id)),
          switchMap(nextTask => {
            if (!nextTask) {
              return this.workflowService.completeFolder();
            } else {
              return observableOf(nextTask);
            }
          }),
        ).subscribe(response => console.log(response));
    });
  }

My attempt at using a higher-order observable to instead return one observable:

save(): Observable<any> {
  const { annotManager } = this.wvInstance;

  const docViewerobservable = from(annotManager.exportAnnotations({ links: false, widgets: false }));

  return docViewerobservable.pipe(
    concatMap(xfdfString => {
      const requestId = (<SignatureDocumentData>this.task.actionData).requestId;
      let data = { encodedDocument: encodeBase64(xfdfString) };
      

      this.documentService.signDocument(requestId, data)
      .pipe(
        switchMap(signResponse => this.workflowService.completeAction(this.task.id)),
        switchMap(nextTask => {
          if (!nextTask) {
            return this.workflowService.completeFolder();
          } else {
            return observableOf(nextTask);
          }
        })
      );
    })
  );
}

Answer №1

It seems like the solution lies in simply returning the Observable created within the concatMap function.

save(): Observable<any> {
  const { annotManager } = this.wvInstance;

  const docViewerobservable = from(annotManager.exportAnnotations({ links: false, widgets: false }));

  return docViewerobservable.pipe(
    concatMap(xfdfString => {
      const requestId = (<SignatureDocumentData>this.task.actionData).requestId;
      let data = { encodedDocument: encodeBase64(xfdfString) };
      

      return this.documentService.signDocument(requestId, data)
      .pipe(
        switchMap(signResponse => this.workflowService.completeAction(this.task.id)),
        switchMap(nextTask => {
          if (!nextTask) {
            return this.workflowService.completeFolder();
          } else {
            return observableOf(nextTask);
          }
        })
      );
    })
  );
}

All in all, your code looks good!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for updating selenium-webdriver if it is not globally installed on my system?

After installing selenium-webdriver with the command npm install selenium-webdriver (without the -g option), I found that the usual instruction of running webdriver-manager update did not work since it was installed locally. What is the correct way to upd ...

Is there a way to display a message box when the mouse cursor hovers over a text box?

Currently, I have set up 3 text boxes in my project. The functionality I am trying to achieve is when the user clicks on the second text box, the value of the first text box should be displayed in a message box (providing that the validation for the first ...

Can you explain the significance of the file:workspaces in the package dependencies?

Attempting to utilize npm 7 workspaces feature "workspaces": { "packages": [ "packages/apps/*", "packages/components", ], Upon installation, my package.json includes: "dependencies": ...

Assigning attributes to inner components in VueJS based on prop values

Experimenting with some common VueJS syntax, but I am struggling to get this Button.vue SFC to function properly: <script setup> defineProps({ ... href: String, ... }); </script> ... <template> <Link :href="href&quo ...

Pass multiple parameters in a single line using FormData() function

I have a question about my React project. Currently, I am using the following syntax: const data = new FormData(); data.append("token", this.props.token); data.append("origin", this.props.origin); .... My question is: Is there a way to condense these ap ...

Is it possible to create a progress bar in blue that is similar to the horizontal blue progress bar seen in Gmail when a user submits a form?

Currently, I am utilizing Bootstrap v3.3.5 on my website. In a particular situation, I have a form displayed within a Bootstrap modal dialog. The user fills in the data and submits the form. After submission, the form remains as it is until a response is ...

A blank canvas appears in Chart.js within a node.js environment

I'm encountering an issue while trying to utilize Chart.js with JSDOM in Node.js. Based on my observations, I don't believe the problem lies within JSDOM because I am able to draw on the canvas and see proper rendering. Therefore, my suspicion i ...

Allow React to complete one loop (including setState) before starting another loop

handleSubmit = () => { this.setState({ modalState: false }) this.state.codeToClass.forEach((code, classId, map) => { const cr = _.find(this.state.classRoles, { id: classId }) if (code === cr.classCode) { console.log(&apo ...

Transfer all specified resources from one stack to another in AWS CDK

In the process of creating two stacks, I aim to reference the resources from the first stack, such as Lambda, API Gateway, and DynamoDB, in the second stack without hard coding all the resources using Stack Props. Please note: I do not want to use Stack Pr ...

What is the significance of using the "why" in the href property within the

I need help understanding why the plus "+" is used before and after myUrl in the function .not. Even though it works fine with or without the +, I am curious about why it was included in the code snippet. <script type="text/javascript"> $(documen ...

Enhancing the appearance of specific text in React/Next.js using custom styling

I have a table and I am currently working on implementing a search functionality that searches for an element and highlights the search terms as they are entered into the search bar. The search function is functional, but I am having trouble with the highl ...

Error in referencing the environment variable within Postman

I'm encountering an issue while attempting to transfer a variable from JSON using Postman to an environment variable. The variable is successfully extracted, but there seems to be an obstacle in storing it in the environment variable. Here's the ...

JEST does not include support for document.addEventListener

I have incorporated JEST into my testing process for my script. However, I have noticed that the coverage status does not include instance.init(). const instance = new RecommendCards(); document.addEventListener('DOMContentLoaded', () => ...

Guide to writing a unit test for a parameter decorator in NestJs

I want to implement a unit test for a basic custom decorator that I created, but I'm facing some challenges. This decorator was developed based on the solution provided here. I have Keycloak authentication set up and using this solution in my controll ...

The datepicker is refusing to update the date format

I've been attempting to adjust the date format for my datepicker, but it refuses to change. Below is the code I'm using: $(document).ready(function() { $('#dateselect').datepicker({ format: 'dd/mm/yyyy', o ...

Display or conceal <ul> with a click using AngularJS

I am struggling to display a menu on my HTML page. Currently, it is showing all the submenu options instead of just the options related to the clicked item. Here is the code from my home.html file: <ul class="navbar-nav"> <li data-toggle=" ...

How can I access the backend API integrated with Keycloak through Angular?

I am encountering this error I have configured a proxy Here is my service class The URL I need to access on the backend is http://localhost:8089/greet My current goal involves integrating Keycloak with the backend and making calls from the front end. W ...

Is Firefox recording session storage information along with browser history?

When using Windows 10, I encountered a scenario where there is a server that accepts a POST to /random. Upon receiving the request, the server generates an HTML file with a new random number embedded in JavaScript. This JavaScript is responsible for displa ...

Simple method to determine if a variable belongs to an enumeration

Among the numerous discussions on this topic, none seem to focus on developing a versatile function. This function should take an enum and a variable as input, check if the variable is part of that enum, and update the variable type if it is. I have made ...

You are unable to use multiple background colors on a material UI snackbar

Is there a way to apply multiple background colors to a material UI snackbar? I attempted using linear-gradient as shown below, but it didn't work. import Snackbar from 'material-ui/Snackbar'; const bodyStyle = { border: `2px solid ${co ...