Merge information from two sources utilizing concatMap

I am encountering an issue where I need to extract a specific value from the data obtained from my first service in order to pass it on to the second service. Angular seems to have trouble with 'firstserviceResultsJson.indSsn'. How can I successfully transfer data from the first service to the second service for processing?

    this.firstService(query).pipe(
      .firstServiceMethod(query).pipe(
        concatMap(firstServiceResultsJson => this.secondService.secondServiceMethod(firstServiceResultsJson.specificParameter))
      )
    .subscribe(combinedResults => (this.finalResultsToSendToView = combinedResults ));
angulartypescriptangular5

Answer №1

Double check that the firstServiceMethod is returning the correct object so you can access a property on the result. Then utilize a concatMap with a resultSelector to display the outcome of both the outer and inner observables. See the code snippet below for an example:

this.firstService
  .firstServiceMethod(query)
  .pipe(
    concatMap(
      firstServiceResultsJson =>
        this.secondService.secondServiceMethod(firstServiceResultsJson.specificParameter),
      (outer, inner) => [outer, inner]
    )
  )
  .subscribe(
    combinedResults => (this.finalResultsToSendToView = combinedResults)
  );

Check out the Demo here

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

Utilize a variable within a regular expression

Can the variable label be used inside a regex like this? const label = 'test' If I have the regex: { name: /test/i } Is it possible to use the variable label inside the regex, in the following way? { name: `/${label}/i` } What do you think? ...

javascripttypescript

Managing errors in ErrorHandler and addressing them in HttpInterceptor

Can you explain the difference between error handling methods in Angular 7? Is it necessary to handle global errors in HttpInterceptor and also in Angular's built-in ErrorHandler? In the HttpInterceptor, what types of errors can be handled, and in the ...

angularexceptionerror-handlingangular-http-interceptors

Currently, my goal is to create PDFs using Angular

<button class="print" (click)="generatePDF()">Generate PDF</button> Code to Generate PDF generatePDF(): void { const element = document.getElementById('mainPrint') as HTMLElement; const imgWidth = 210; ...

javascriptangularangularjstypescriptpdf

Enhance your TypeScript skills by leveraging types on the call() method in redux-saga

Is there a way to specify the types of a function using call()? Consider this function: export function apiFetch<T>(url: string): Promise<T> { return fetch(url).then(response => { if (!response.ok) throw new Error(r ...

typescriptcallredux-sagayield

Unlocking the Power of Authorization Code Grant with PKCE in Angular6+ Applications

Seeking guidance on how to implement the MSAL library in Angular 6+ applications for integration with AZURE AD. After reviewing Microsoft's documentation, I discovered two flows: the 'implicit grant flow' and the 'auth code flow'. ...

angularoauthoauth-2.0azure-ad-msalimplicit-grant

Nativescript Image-picker is encountering difficulties locating files in external storage

I have been using nativescript-imagepicker from the related website and followed all the instructions in the documentation and sample codes. I even set the permission code in AndroidManifest.xml for API 29 and higher. However, I encountered an error after ...

angularnativescript

No matter the circumstances, the "Unexpected end of form" error consistently appears when attempting to upload files in Express

I'm facing a challenge in implementing a file upload API endpoint for my Express+no-stress+Typescript application. Initially, I attempted to use the express-fileupload library, but I quickly realized that it didn't integrate well with Typescript ...

node.jstypescriptexpressfile-upload

When attempting to use the 'orderBy' pipe in conjunction with async functions, an error is thrown indicating that the pipe cannot be found

When trying to implement the orderBy pipe in ngFor along with async pipe, I encountered an error as follows: ERROR Error: Uncaught (in promise): Error: Template parse errors: The pipe 'orderBy' could not be found (" </div> ...

angulartypescriptrxjsangular6observable

Encountering an issue with Angular 8 and Material where a table does not fully render on mobile browsers like Chrome, causing rows to only half

Currently, I have an Angular 8 application integrated with Material v8.2.3 where a table with expanding rows is being used. While everything functions perfectly on desktop browsers, there seems to be an issue when accessing the application on mobile phone ...

angularmobileangular-material

An error with code -4058 is preventing the installation of npm packages when running the 'npm install' command after using 'ng new'

Embarking on a new Angular project, I encountered an issue while trying to install packages listed in my package.json file. Despite multiple attempts on both of my computers, the same error persisted, leaving me baffled. Determined not to give up, I seek g ...

angularnpm

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

Implementing the breadcrumb component within dynamically loaded modules loaded through the router-outlet component

I'm currently working on an angular 8 breadcrumb component for my application. The requirement is to display it in the content of the page, not just in the header, and it should never be located outside the router-outlet. This has posed a challenge fo ...

angulartypescriptrxjsangular2-routing

Updating non-data properties dynamically in a custom AG Grid cell renderer

In my grid setup, I have implemented an editor button in a column for each row and a new item creator button outside the grid. One of the requirements is that all buttons should be disabled when either the create or edit button is clicked. To achieve thi ...

angulartypescriptag-grid-angular

TS2349 emerges when incorporating lazy-loading in React

I've been working on refactoring a React 18 app to incorporate lazy loading, following the guidelines provided in the official documentation: One effective method to implement code-splitting in your application is through the dynamic import() syntax ...

reactjstypescriptreact-lazy-load

Angular client created by NSwag uploads a file to a .NET Core backend

I'm facing a challenge with uploading a file to my controller using .NET Core 6.0 backend and an Angular client generated by NSwag. My controller has a model that contains an 'IFormFile' called file. [HttpPost("single-file"), DisableReques ...

angular.net-corenswagiformfile

Detecting Errors in Angular Components Using Observers

In my component, I have the following code: this.authService.login4(this.email, this.password) .pipe(first()) .subscribe( data => { console.log(data); }, error => { ...

angularrxjs

Angular's mat table paginator now efficiently loads all data directly onto the first page

Currently, I am facing an issue while loading JSON data from a backend ASP.NET Core C# API to an Angular material table. The problem lies in the fact that all 100 rows of JSON data are being loaded onto the first page, despite setting up the paginator with ...

c#jsonangularpaginationangular-material

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

I am dealing with an array of Responses that contain multiple IDs along with different question answers. Responses = [0:{Id : 1,Name : John, QuestionId :1,Answer :8}, 1:{Id : 1,Name : John, QuestionId :2,Answer :9}, 2:{Id : 1,Name : John, QuestionId :3,An ...

javascriptjqueryarraystypescriptspfx

Creating a mandatory and meaningful text input in Angular 2 is essential for a

I am trying to ensure that a text material input in my app is mandatory, with a message like "Please enter issue description." However, I have noticed that users can bypass this by entering spaces or meaningless characters like "xxx." Is there an npm pac ...

javascriptc#asp.netangulartypescript

Updating the appearance of a non-declared HTML child component on-the-fly using Angular

Trying to dynamically adjust the style of an unspecified div is causing some trouble. Using Angular and PrimeNG, invisible divs are being generated that I cannot access through inline styles. The objective is to allow a user to input a width as a string (5 ...

htmlcssangularsassprimeng