The combination of Observable streams in combineLatest will persist even if one encounters a

I have a function designed to retrieve multiple documents from Firebase.

  fetchDocuments(documentIds: string[]): Observable<TreeNodeDocument[]> {
    const observables = [];
    for(let id of documentIds){
      observables.push(this.fetchDocument(id));
    }
    return Observable.combineLatest(observables, (...docs: TreeNodeDocument[]) => {
      //perform some transformations on the retrieved documents
      return docs;
    });
  }

The method this.fetchDocument(id) returns an observable with type TreeNodeDocument.

This function works well when all documents are successfully retrieved. However, sometimes it is possible that certain documents cannot be resolved, causing the corresponding fetchDocument(id) observable to fail. While it is expected that some documents may not be retrievable, the Observable.combineLatest fails altogether if any of them fail (which is the default behavior).

My question now is, can I use combineLatest in a way that will only include the documents for which the retrieval was successful and disregard those that failed? Or is there another approach to achieve this?

Cheers

Answer №1

To ensure seamless flow, you can connect each source Observable (specifically this.fetchDocument(id)) with the catchError method, which replaces any potential error notifications with a placeholder next item or any alternative content of your choice.

for (let id of documentIds){
  observables.push(this.fetchDocument(id).pipe(
    catchError(() => of(null)),
  ));
}

...

It is essential to note that simply using empty() or of() alone will not suffice as they do not emit a next item, resulting in an unexpected behavior when using combineLatest. Feel free to substitute null with any suitable value. With this approach, the array of documents will contain null at positions corresponding to failed source Observables.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using TypeScript with custom components as children in React, the `type` returned by React.Children is a string representing the function

It might sound a bit odd, or maybe I'm completely off track here. While going through some articles and React documentation on getting children and identifying specific child components using React.Component.map(), I ran into an issue with my custom c ...

Encountering the error message "Angular: invalid URL value sanitization" every time I attempt to refer to a folder within

I'm currently working on a project where I need to pull images from my disk into an Angular application using PHP as the backend for file retrieval. <ngb-carousel *ngIf="imageNames" class="carousel-fade"> ...

Steps to reset Pipe in Angular 4

Is there a way to reinitialize a Pipe in Angular 4? I currently have a component that utilizes a Pipe. The component renders once with some data that uses the Pipe. If the data changes, the Pipe will also need to change. What is the best method to rein ...

Custom Typescript type that runs concurrently with the base type is disregarded

Assumption: When creating a custom type that mirrors an existing type, the expectation is for variables assigned to that type to maintain it and not default back to the base type. In the function f provided below, the expected return type should be Dog ins ...

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

On the user interface, I have a dynamic display of mat-grid-tile within a mat-grid-list. These tiles change in number and data based on backend values. When a user clicks on a mat-grid-tile, it triggers a function that receives the tile's data. My goa ...

Is there a way to create two slide toggles with unique colors on a single page?

How can I create two slide toggles with a unique color scheme on the same page? Looking to add some flair to your website with custom-colored slide toggles? Learn how to effortlessly incorporate two of them onto a single webpage here. ...

What is the best way to extract the inner text from an element within a QueryList<T>?

function addGoatToVaccinationGroup(goatObject: {earTag:string, id:number}){ for (let i = 0; i < this.vaccineQueue.length; i++){ if (this.vaccineQueue[i].earTag === goatObject.earTag){ this.vaccineQueue.splice(i, 1); ...

What is the method for displaying an object as JSON on the console in Angular2?

I've been utilizing a service to input my form data into an array within my angular2 application. The information is organized in the following manner: arr = [] arr.push({title:name}) After executing console.log(arr), it displays as Object. However, ...

Strange behavior exhibited by the HTML DataList component within an Angular application

I have created a simple component that displays a list of data and allows users to add new entries. <h6 *ngIf="withHeader"><label for="select"> {{title}} </label></h6> <label *ngIf="!withHeader" [ngClass]="{'required&apos ...

Failed to download JSON file in Angular 2

I am trying to export a data table to a JSON file using the code below: import { ErrorHandler } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Component, Input } from '@angular/core&a ...

Encountering an error when attempting to iterate over an undefined property using an API

I am trying to fetch all classes and their assignments from Google Classroom. I successfully used Google's example code for listing the classes, but had to write my own code for listing the assignments. While the code runs as expected and lists the as ...

Issue with caching when using lazy loading with Angular 2 components

When naming Angular 2 lazy loaded components, they are designated as 0.js, 1.js, etc. However, the entry point is given a version prefix while all lazy loaded components keep their original names. This leads to discrepancies in the code versions present ...

There are a few steps to take in order to sort an array of objects by a

I want to organize and display data in a sortable table format javascript let dataList = [ { idx: number, name: string, btn: number, index: number }, { idx: number, name: string, btn: number, index: number }, { idx: number, name: string, btn: number ...

Angular 14 debug error: Incorrect base path setting

Whenever I go for a run, I have to specify a starting point such as /pis/ ng serve --serve-path /pis/ Even after following these instructions, nothing seems to load. Can anyone lend a hand with setting a starting point in the ng serve process? ...

What is the process for importing a JSON5 file in Typescript, just like you would with a regular JSON file?

I am looking to import a JSON5 file into a JavaScript object similar to how one can import a JSON file using [import config from '../config.json']. When hovering over, this message is displayed but it's clearly visible. Cannot find module & ...

What is the best way to handle an OR scenario in Playwright?

The Playwright documentation explains that a comma-separated list of CSS selectors will match all elements that can be selected by one of the selectors in that list. However, when I try to implement this, it doesn't seem to work as expected. For exam ...

The server has access to an environment variable that is not available on the client, despite being properly prefixed

In my project, I have a file named .env.local that contains three variables: NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=pk_test_<get-your-own> MAGIC_SECRET_KEY=sk_test_<get-your-own> TOKEN_SECRET=some-secret These variables are printed out in the file ...

What is the method for creating an object type that necessitates a key determined by a variable?

Is it feasible to create a custom type in TypeScript that can check if a given key exists within the Type definition? I am specifically using noUncheckedIndexAccess: true configuration. interface one { foo: string; bar: string; } interface two { b ...

The ValidationSchema Type in ObjectSchema Seems to Be Failing

yup 0.30.0 @types/yup 0.29.14 Struggling to create a reusable type definition for a Yup validationSchema with ObjectSchema resulting in an error. Attempting to follow an example from the Yup documentation provided at: https://github.com/jquense/yup#ensur ...

An error has occurred in Angular5 and Three.js: 'Scene1' property is undefined

Running into an issue with my angular5 website integrated with Three.js. I keep getting an error message that says: Cannot read property 'Scene1' of undefined when trying to add an object to the Scene. Any suggestions on how to properly define th ...