How to correctly implement forkJoin in my pipe

Question

I have the next pipe:

this.adminService.companies$
      .pipe(
        takeUntil(this.unsubscriber),
        map((data: CompanyCard[]) => {
          const companies: CompanyCard[] = [...data.map(company => ({...company}))]

          companies.forEach((company: CompanyCard) => {
            if ('_seconds' in company.created) {
              company.created = new Date(company.created._seconds * 1000)
            }

            if (company.owner) {
              this.userService.getUser(company.owner).pipe(
                take(1),
                takeUntil(this.unsubscriber),
                map((data: User) => data.email)
              ).subscribe(email => company.owner = email)
            }
          })

          return companies;
        }),
        tap(companies => this.companies = companies)
      ).subscribe();

My problem is when I render this data in the template, I see the blinking content because I get the data before all transforms inside map() finishes. So I guess I have to wrap all operators in forkJoin, but I do not know how to do it properly.

Mike Jerred Mike Jerred · Accepted Answer · 2020-05-07T00:29:51

Like this:

this.adminService.companies$
  .pipe(
    takeUntil(this.unsubscriber),
    map((data: CompanyCard[]) => data.map(company => '_seconds' in company.created
      ? ({ ...company, created: new Date(company.created._seconds * 1000) })
      : company
    )),
    switchMap((data: CompanyCard[]) => forkJoin(data.map(company => company.owner
      ? this.userService.getUser(company.owner).pipe(
        take(1),
        takeUntil(this.unsubscriber),
        map((user: User) => ({ ...company, owner: user.email }))
      )
      : of(company)
    )))
  )
  .subscribe(companies => {
    this.companies = companies;
  });

How to correctly implement forkJoin in my pipe

1 Answers