chaining two observables in angular

Question

save(body) {
  let headers = new HttpHeaders()
  headers.append('Content-Type', 'text/plain')
  return this.callWorkflowService
    .getRawDataflow()
    .pipe(
      map(data => {
        data['jobs'] = body
        return data
      })
    )
    .pipe(newData => // correspond to `return data` 
      this.httpClient
        .post(this.url, JSON.stringify(newData), { headers: headers })
        .pipe(
          map(res => {
            return res
          })
        )
    )
}

What I'm getting actually inside the httpRequest is an Observable instead of an Object. I don't understand why.

do you subscribe to your saveBody ? httpClient.post always return an observable — Alann
– Alann, Commented Dec 31, 2019 at 14:59

Siddharth Pal · Accepted Answer · 2019-12-31 15:54:59Z

2

Here when you are chaining multiple Observables you are creating a Observable of Observables. So you need to flatten them before you chain them. RxJS provides multiple flattening operators like switchMap , mergeMap, concatMap and exhaustMap for flattening Observables.

  save(body) {
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'text/plain');
    return this.callWorkflowService.getRawDataflow().pipe(
      map(data => ({data, ...{"jobs": body}})),
      mergeMap(newData =>
        this.httpClient.post(this.url, JSON.stringify(newData), {
          headers: headers
        })
      )
    );
  }

This is a wonderful article which talks about flattening of Observables.

answered Dec 31, 2019 at 15:54

Siddharth Pal

1,45811 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrei · Accepted Answer · 2019-12-31 15:25:49Z

1

you should use switch map operator for example

 return this.callWorkflowService
    .getRawDataflow()
    .pipe(
      map(data => {
        data['jobs'] = body
        return data
      }),
    switchMap(() => this.httpClient
        .post(this.url, JSON.stringify(newData), { headers: headers })
        .pipe(
          map(res => {
            return res
          })
        ))
    )

answered Dec 31, 2019 at 15:25

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Collectives™ on Stack Overflow

chaining two observables in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related