Issues encountered when trying to integrate RXJS operators with Firebase

Question

Issues encountered when trying to integrate RXJS operators with Firebase

Currently, I am utilizing RXJS operators in combination with the firebase observable (specifically distinct and filter). If you would like to see my firebase tree, you can access it here. Below is an excerpt of my code:

let places this.db.list(`users/${this.authProvider.getUID()}/visitedPlaces`,{
    query:{
      orderByChild:"googleId"
    }
  });
places.distinct((p)=>{ 
  console.log(p)
  return p.googleId;
}).
   subscribe((snap)=>{
      console.log(JSON.stringify(snap,null,2))
    },(err)=>{
      console.log(JSON.stringify(err,null,2))
    },()=>{
      console.log("completed");
    });

I am attempting to filter the firebase data based on googleId. Although no errors are being generated, the distinct list is not functioning as expected.

If anyone has any insights or suggestions for why this may be happening, I would greatly appreciate it. Thank you.

angular typescript firebase firebase-realtime-database rxjs

Answer 1

Answer №1

It seems like the issue lies in using the distinct operator on an array instead of a stream of objects. This results in p being treated as an array within the distinct operator, rather than the individual objects inside the array. To resolve this, you can achieve the desired outcome with plain JavaScript using a map function:

Rx.Observable.of([
  { id: 1},
  { id: 2},
  { id: 1},
  { id: 3},
  { id: 2}
]).map(x => x.reduce((a, c) => {
   if (!a.some(y => y.id === c.id)) {
      a.push(c);
   }
   return a;
  }, [])
).subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.js"></script>

Alternatively, you can expand the array using the flatMap method like this:

Rx.Observable.of([
  { id: 1},
  { id: 2},
  { id: 1},
  { id: 3},
  { id: 2}
])
.flatMap(x => x)
.distinct(x => x.id)
.subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.js"></script>

Answer 2

It seems like the issue lies in using the distinct operator on an array instead of a stream of objects. This results in p being treated as an array within the distinct operator, rather than the individual objects inside the array. To resolve this, you can achieve the desired outcome with plain JavaScript using a map function:

Rx.Observable.of([
  { id: 1},
  { id: 2},
  { id: 1},
  { id: 3},
  { id: 2}
]).map(x => x.reduce((a, c) => {
   if (!a.some(y => y.id === c.id)) {
      a.push(c);
   }
   return a;
  }, [])
).subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.js"></script>

Alternatively, you can expand the array using the flatMap method like this:

Rx.Observable.of([
  { id: 1},
  { id: 2},
  { id: 1},
  { id: 3},
  { id: 2}
])
.flatMap(x => x)
.distinct(x => x.id)
.subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.js"></script>

Issues encountered when trying to integrate RXJS operators with Firebase

Answer №1

Similar questions

Leveraging Runtime Environment Variables in Angular 5 within the app.module.ts File

Utilizing several root applications for the login component

Utilizing the arr.push() method to replace an existing value within an array with a new object, rather than simply adding a new

An error occurred involving the absence of a static method called registerDefaultInstance within Firebase Performance and Espresso Instrumented Tests

Adding a firebase-messaging-sw.js file to Bubble? [UPDATE - file not compatible]

Setting an Observable reference to null within a map operator does not have any impact

Definitions for images in the following format

CORS policy is preventing a patch request in loopback 4 from going through

Is it advisable to standardize or de-standardize tree-structured data while creating the ngrx state?

What is the best way to define this.someProperty in a React component using TypeScript?

Even after setting a new value to a variable in Vue, it may still reference the old

Retrieve the user's name with the highest points using Android Studio's Firestore

Splitting Angular 4 code using angular-cli

Utilizing Angular 2 directives through an npm package

Guide on organizing the Object into a precise structure in Angular

How to connect a form component object with a parent object in Vue3 using v-model and the Options API?

Investigating the Angular signals that triggered the effect

Setting up the propTypes for interface in React TypeScript

Discover the step-by-step guide to setting up forwarding in React Router 5

Struggling to determine data type in Typescript