RxJS emit array of strings, one second apart from each other

Question

I have a block of code that is responsible for taking an Observable<string[]>, then mapping that to Observable<string> and emitting the values 1 second apart from each other.

Think of this like a message ticker on a website.

My current code is working below:

    const arrayOfStrings$ = of([
        'Warming things up',
        'Getting things ready',
        'Welcome'
    ]);

    this.messages$ = arrayOfStrings$.pipe(
        switchMap((messages) => from(messages).pipe(
            concatMap((innerMessage) => of(innerMessage).pipe(delay(1000))),
        )),
        tap((message) => {
            console.log(`Message: ${message}`);
        })
    );

Is there a better way to do this with less code? It's mainly the switchMap() and concatMap() inside each other that is bothering me.

Thanks for any help and suggestions.

Edit: This is a simplified version of what I have running in my actual project. I am just trying to find an easier way to go from an Observable<string[]> to an Observable and delay each emission one second apart after each emission

Answer 1

You can use the concatMap() and delay() operators to make sure that each emission will be delivered one-by-one with a specified time interval.

const arrayOfStrings = [
  'Warming things up',
  'Getting things ready',
  'Welcome'
];

(from(arrayOfStrings)
  .pipe(
    concatMap(message => 
      of(message).pipe(delay(1_000))
    ),
  )
  .subscribe()
);