The pipe operator in RxJS is never executed in the Observable fork

Question

The pipe operator in RxJS is never executed in the Observable fork

I am attempting to execute and retrieve values from an array of observables (each obtained from literalsService) using a pipe. Below is the code snippet:

translateLiterals() {
    const literalsToTranslate: string[] = [
    'certificate_title',
    'with_address',
    'hereby',
    'declare',
    'electronic_records',
    'proceeded_to_shipment',
    'return_address',
    'return_address',
    'addressee',
    'message_subject',
  ];
    const newArray: Observable<string>[] = [];
    literalsToTranslate.map(literal => newArray.push(this.literalsService.getValue('Ngwa.Ngwa', literal)));
    this.literalsArray$ = forkJoin([...newArray]).pipe(map((results) => {
      console.log(results);
      return results;
    }));
  }

In my HTML template, I am subscribed to the pipe with:

<ng-container *ngIf="literalsArray$ | async"></ng-container>

However, the console.log() does not display anything... Any ideas why?

angular typescript rxjs

Answer 1

Answer №1

It is likely that the function

this.literalsService.getValue('Ngwa.Ngwa', literal);

is returning a string. To ensure it can be treated as an Observable, you can wrap it with:

of(this.literalsService.getValue('Ngwa.Ngwa', literal));

In addition, the operator forkJoin will wait for all provided streams to complete before emitting a value.

Answer 2

It is likely that the function

this.literalsService.getValue('Ngwa.Ngwa', literal);

is returning a string. To ensure it can be treated as an Observable, you can wrap it with:

of(this.literalsService.getValue('Ngwa.Ngwa', literal));

In addition, the operator forkJoin will wait for all provided streams to complete before emitting a value.

Answer 3

Answer №2

After receiving feedback from users @ShamPooSham and @martin, it became clear that the issue lay in the method

this.literalsService.getValue ('Ngwa.Ngwa', literals)

being unable to observe changes in the literals, causing the forkJoin method not to start as the literals were incomplete. To address this problem, I devised a separate method and made modifications to the original one by adding a take function:

New Method:

translateString(text: string): Observable<string> {
    return this.literalsService.getValue('Ngwa.Ngwa', text).pipe(
      switchMap((translated) => {
        if (!translated.startsWith('N/A')) {
          return of(translated);
        } else {
          return this.literalsService.getValue('Ngwa.Ngwa', text).pipe(
            skip(1), // First event translation comes not translated
            map((secondTryTranslation) => {
              return secondTryTranslation;
            }));
        }
      }),
    );
  }

Correction of the first method:

    translateLiterals() {
    const literalsToTranslate: string[] = [
    'certificate_title',
    'with_address',
    'hereby',
    'declare',
    'electronic_records',
    'proceeded_to_shipment',
    'return_address',
    'return_address',
    'addressee',
    'message_subject',
  ];
    const newArray: Observable<string>[] = [];
    literalsToTranslate.map(literal => newArray.push(this.translateString(literal).pipe(take(1)))); //<--- Here is the correction
    this.literalsArray$ = forkJoin([...newArray]).pipe(map((results) => {
      return results;
    }));
  }

Answer 4

After receiving feedback from users @ShamPooSham and @martin, it became clear that the issue lay in the method

this.literalsService.getValue ('Ngwa.Ngwa', literals)

being unable to observe changes in the literals, causing the forkJoin method not to start as the literals were incomplete. To address this problem, I devised a separate method and made modifications to the original one by adding a take function:

New Method:

translateString(text: string): Observable<string> {
    return this.literalsService.getValue('Ngwa.Ngwa', text).pipe(
      switchMap((translated) => {
        if (!translated.startsWith('N/A')) {
          return of(translated);
        } else {
          return this.literalsService.getValue('Ngwa.Ngwa', text).pipe(
            skip(1), // First event translation comes not translated
            map((secondTryTranslation) => {
              return secondTryTranslation;
            }));
        }
      }),
    );
  }

Correction of the first method:

    translateLiterals() {
    const literalsToTranslate: string[] = [
    'certificate_title',
    'with_address',
    'hereby',
    'declare',
    'electronic_records',
    'proceeded_to_shipment',
    'return_address',
    'return_address',
    'addressee',
    'message_subject',
  ];
    const newArray: Observable<string>[] = [];
    literalsToTranslate.map(literal => newArray.push(this.translateString(literal).pipe(take(1)))); //<--- Here is the correction
    this.literalsArray$ = forkJoin([...newArray]).pipe(map((results) => {
      return results;
    }));
  }

The pipe operator in RxJS is never executed in the Observable fork

Answer №1

Answer №2

Similar questions

Attempting to limit the user's input to only the beginning of the string

I encountered an issue with my TypeScript function in Angular, as it is unable to process multiple uploaded files

Ways to determine if a specified character sequence is present in an Enumerator?

Angular 7: Efficiently Implementing Multiple Cascading Combobox Components

Error in Angular not providing code line numbers for debugging

Attempting to utilize the setInterval function in Ionic 4 to invoke a specific function every second, unfortunately, the function fails to execute

Using Ionic to invoke a function within another function in a JavaScript service

Guide on displaying a tooltip for an object in an Angular component using Bootstrap syntax

IE11 causing issues with Bootstrap/Angular dropdown functionality

Contrast between utilizing and publishing, demanding and bringing in within Express

Guide on importing TypeScript types into Vuetify 3

Is it possible to transfer files using Angular 2?

Tips for transferring an excel file to a C# controller from Angular 4 within Visual Studio 2017

Issue [ERR_MODULE_NOT_FOUND]: The module 'buildapp' could not be located within buildserver.js

The function is failing to return the expected value received from the observable subscription

Zod vow denial: ZodError consistently delivers an empty array

Why is the AngularJS 2 child @Component not being replaced in this scenario?

What steps are involved in creating animations on angular.dev?

The function ValueChange remains uninvoked

Angular 4 - Enabling one checkbox guarantees activation for all