switchMap, startWith, why not try another switchMap?

Question

switchMap, startWith, why not try another switchMap?

this.timeline$ = app.selectedSites$.pipe(
  debounceTime(2000),
  switchMap(sites => this.interval.pipe(map(() => sites))),
  switchMap(sites =>
    analytics.timeline(sites, 60 * 24 * 2, 60).pipe(
      map(result => {
        const colors = getColors(result);

        return {
          labels: result[0].datapoints.map(pair => pair[1]),
          datasets: (<any[]>result).map((target, i) => ({
            pointRadius: 0,
            label: target.target,
            fill: false,
            backgroundColor: colors[i % colors.length],
            borderColor: colors[i % colors.length],
            data: target.datapoints.map(pair => ({
              y: pair[0],
              x: pair[1]
            }))
          }))
        };
      })
    )
  ),
  share()
);

How can I modify this.timeline$ to emit null when a new selectedSite is chosen (after debouncing), while loading the first set of data, and then automatically refresh every 30 seconds without emitting null before each refresh? I'm struggling to determine where to include the startWith(null) in this code snippet...

typescript rxjs

Answer 1

Answer №1

To put it differently - you are looking for two streams: one containing all operators, and another that produces null values.

const source$ = app.selectedSites$
  .pipe(
    debounceTime(2000)
  )


this.timeline$ = source$.pipe(
  switchMap(sites => this.interval.pipe(map(() => sites))),
  switchMap(sites =>
    analytics.timeline(sites, 60 * 24 * 2, 60)
      .pipe(
        map(result => getField(result))
      )
  ),
  merge(source$.pipe(mapTo(null))),
  share()
);

Answer 2

To put it differently - you are looking for two streams: one containing all operators, and another that produces null values.

const source$ = app.selectedSites$
  .pipe(
    debounceTime(2000)
  )


this.timeline$ = source$.pipe(
  switchMap(sites => this.interval.pipe(map(() => sites))),
  switchMap(sites =>
    analytics.timeline(sites, 60 * 24 * 2, 60)
      .pipe(
        map(result => getField(result))
      )
  ),
  merge(source$.pipe(mapTo(null))),
  share()
);

Answer 3

Answer №2

Here's the final result...

convertToChartData(callback: (websites: string[]) => Observable<any>) {
    return this.application.selectedWebsites$.pipe(
      debounceTime(2000),
      switchMap(websites =>
        this.timeInterval.pipe(
          switchMap(() => callback(websites)),
          startWith(null)
        )
      ),
      share()
    );
}

Answer 4

Here's the final result...

convertToChartData(callback: (websites: string[]) => Observable<any>) {
    return this.application.selectedWebsites$.pipe(
      debounceTime(2000),
      switchMap(websites =>
        this.timeInterval.pipe(
          switchMap(() => callback(websites)),
          startWith(null)
        )
      ),
      share()
    );
}

switchMap, startWith, why not try another switchMap?

Answer №1

Answer №2

Similar questions

Enhance the performance of page loading and implement a consistent spinner feature to ensure smooth transitions for users in Next.js version 13

Replacing the '+' character with a space in HttpParams within Angular 6

Angular 4: Utilizing a class with a constructor to create an http Observable model

Ways to prevent Deno Workers from using cached source code

How can TypeORM be used to query a ManyToMany relationship with a string array input in order to locate entities in which all specified strings must be present in the related entity's column?

Conditional statements in Typescript can be utilized when dealing with unknown data types

Typescript errors in console not being displayed by swc-loader

When using string as a primitive type in Vue 3, what distinguishes the usage of PropType in props from not using it?

Sending chosen selection in a scrollable dropdown menu in Angular

Vue: Simple ways to retrieve state data in MutationAction

What is the process of type checking in Typescript when passing arguments?

Issue with Formgroup in Angular Reactive Form - Validation not functioning as expected

Encountered a WebGL context creation error when running TypeScript tests with Jest

Why is the value not being assigned by the Angular component from the observable service getter?

angular2 with selenium webdriver: Issue with resolving 'child_process' conflict

The process of converting an object to a string in Typescript

Splitting angular2 and browserify into individual vendor and app bundles can help prevent import errors

The takeUntil function will cancel an effect request if a relevant action has been dispatched before

What is the process for executing a node script within a TypeScript React project?

Exploring Angular2: Understanding how to retrieve an object with an unknown key