Use foreach inside an Angular Concatmap

Question

Problem. I am required to post make 3 HTTP post requests to 3 different endpoints. I am using concatMap to sequentially HTTP post to an observable. My issue takes place when I need to use a foreach loop to get each value from the formarray.

My code is returning an error.

core.js:5967 ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:27)
    at innerSubscribe (innerSubscribe.js:69)
    at MergeMapSubscriber._innerSub (mergeMap.js:57)
    at MergeMapSubscriber._tryNext (mergeMap.js:51)
    at MergeMapSubscriber._next (mergeMap.js:34)
    at MergeMapSubscriber.next (Subscriber.js:49)
    at TapSubscriber._next (tap.js:46)
    at TapSubscriber.next (Subscriber.js:49)
    at MapSubscriber._next (map.js:35)

What I have tried…

concatMap(() => this.incentiveRecurringEntryForm.controls['entryRowsRecurring'].value.forEach(r => {
        this.updateRecurringWithJobID = addToObject(r, 'IncentiveID', this.job_id);
        console.log(this.updateRecurringWithJobID)
        return this.routeService.postIncentive_Add_Recurring(this.updateRecurringWithJobID).subscribe(
          res => {
            console.log(res)
          }
        )
      })),

@OscarLudick I haven't tried map. It's strange because the forEach works when I use it outside of the concatMap. It just throws this error when I use it inside of the concatMap. — carltonstith
– carltonstith, Commented Oct 25, 2021 at 21:08
yeah, concatMap expects an observable, promise or array, your code is equivalent to this concatMap(() => return undefined); you must return something like a new Observable. — Oscar Ludick
– Oscar Ludick, Commented Oct 25, 2021 at 21:24
It's because concatMap expects an argument but forEach is actually returning undefined. — Allan Juan
– Allan Juan, Commented Oct 25, 2021 at 21:24

Mrk Sef · Accepted Answer · 2021-10-26 13:05:23Z

concatMap is an operator. It needs a source observable. I've called it someObservable in my example.

concatMap expects an observable, not an array of observables. You can use concat on a list of observables however. Concat create an observable for you and doesn't need a source observable (you'll notice it's not 'in a pipe')

concat requires a list of observables, but forEach returns undefined. I use map instead. Array's map returns an array of the same structure as the input array with the given transformation described by the supplied lambda.

You need a list of observables, so trying to subscribe doesn't work as that will return a list of subscriptions. Just let the concat do the subscribing.

Here's what the would look like:

someObservable.pipe(

  /* More operators? ,*/
  
  concatMap(() => concat(...
    this.incentiveRecurringEntryForm.controls['entryRowsRecurring'].value.map(r => {
      this.updateRecurringWithJobID = addToObject(r, 'IncentiveID', this.job_id);
      console.log(this.updateRecurringWithJobID);
      return this.routeService.postIncentive_Add_Recurring(this.updateRecurringWithJobID);
    })
  )),

  /* More operators? */

).subscribe(console.log);

Collectives™ on Stack Overflow

Use foreach inside an Angular Concatmap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related