how to build single object from 2 http requests in angular, without adding another value

Question

If you look at this question. the problem was really simple, but solutions were more complicated, to address more details I am asking this question.

If you look at

Answer 1

If I'm understanding your question correctly, it seems that you are asking about an http request that itself is dependent on another request and that the two requests together need to be combined in some way to create an object that you want to make use of. If I have that correct, then here are some workable examples.

first, you could just build the object you need in the call itself (i.e. in the component.ts file)

const id = this.getIdFromRoute(this.route, 'customerId');

let customerWithSource: ICustomer;

this.customerService.getById(id)
    .subscribe((customer) => {
        this.customerSourceService.getById(customer.SourceId)
            .subscribe((source) => {
                customerWithSource = customer;
                customerWithSource.CustomerSource = source;
            });
        });

or you could do this in the service, and that way in the component you are just subscribing to a method that already does all the work for you. Great if you are looking for reuse.

    getCustomerWithSource(id: number): Observable<ICustomer> {
        return this.getById(id).pipe(
            concatMap((customer) => {
                return this.customerSourceService
                    .getById(customer.SourceId)
                    .pipe(
                        map((source) => {
                            customer.CustomerSource = source;
                            return customer;
                        }),
                    );
            }),
        );
    }

the way this second one is working is that you are getting the first answer back, then using concatMap to make a second call using the values of the first call, then finally using map to make the final object and returning it.

Answer 2

I think you can use RxJs combineLast to achieve what you want.

If you combine the result of the first call and the next call with combineLast will be able to subscribe and get both objects and return a combination of both of them.

Here's an example:

const objA = {xpto: 'xis'};
const objB = {moreData: 'pato'};


of(objA).pipe(
  map((a) => {
    return combineLatest(of(a), of(objB));
  })
).subscribe((result) => {
  result.pipe(
    map(([a, b]) => {
      return {
        newXpto: a.xpto,
        newMoreData: b.moreData
      };
    })
  ).subscribe((combinedObjects) => {
    console.log(combinedObjects);
   })
})

Something like this should work. I don't know if it is the more straigthfoward answer but I did it quickly. Nevertheless it gives you a sense of how you could do it.