Utilizing Angular2 with Firebase for efficient denormalized data queries

Question

Utilizing Angular2 with Firebase for efficient denormalized data queries

I am currently working on crafting a query for a denormalized database. Drawing inspiration from the example showcased in Firebase's blog post, my objective is to:

Retrieve the array of forms associated with the current user and return references to each individual item within that list.

Below is the snippet of code I have been developing:

  getFormList():firebase.database.Reference {
    // the old method
    //return firebase.database().ref('/formsByID').orderByChild('userList').startAt(this.userId).endAt(this.userId);

    var formRef = firebase.database().ref("/formsByID");
    var userRef = firebase.database().ref("/userProfiles");

    // this will be our list of forms beneath the user node
    var userFormRef = userRef.child(this.userId).child("formsList");

    // whenever an item is added to the forms list
    userFormRef.on("child_added", function(snap) {
      // snap.key represents the key of the form fetched from the forms list
      //let formKey = snap.key(): string;
      return formRef.child(snap.key);
    }); 

  }

The issue I'm encountering lies in typescript's expectation for my getFormList method to return a value, but a value will only be returned when a new item is appended to userFormRef - any assistance would be greatly appreciated.

angular typescript firebase firebase-realtime-database ionic3

Answer 1

Answer №1

The method getFormList() in your case will not return any value.

Your return statement should be inside the callback function.

userFormRef.on("child_added", function(snap) {
  return formRef.child(snap.key); // this will return a value for your callback function
});

If you want to access the snap outside of the getFormList() method, you need to implement it there or pass the callback to the getFormList() method.

This can be achieved like this:

 getFormList(cb):firebase.database.Reference {
    var formRef = firebase.database().ref("/formsByID");
    var userRef = firebase.database().ref("/userProfiles");

    var userFormRef = userRef.child(this.userId).child("formsList");

    userFormRef.on("child_added", cb); 
  }

To call the method, use:

getFormList(function(snap) {
  // handle snap data here
});

It all depends on your specific use case.

Answer 2

The method getFormList() in your case will not return any value.

Your return statement should be inside the callback function.

userFormRef.on("child_added", function(snap) {
  return formRef.child(snap.key); // this will return a value for your callback function
});

If you want to access the snap outside of the getFormList() method, you need to implement it there or pass the callback to the getFormList() method.

This can be achieved like this:

 getFormList(cb):firebase.database.Reference {
    var formRef = firebase.database().ref("/formsByID");
    var userRef = firebase.database().ref("/userProfiles");

    var userFormRef = userRef.child(this.userId).child("formsList");

    userFormRef.on("child_added", cb); 
  }

To call the method, use:

getFormList(function(snap) {
  // handle snap data here
});

It all depends on your specific use case.

Answer 3

Answer №2

With the help of @Orlandster, I finally solved the issue I was facing. The key was to simplify my providers and focus on returning references when working with Angular and Firebase. I restructured my providers into two methods:

// Returns a list of forms (ref) for the current user
getUserFormsRef(): firebase.database.Reference {
  var userRef = firebase.database().ref("/userProfiles");
  return userRef.child(this.userId).child("formsList");
}

// Returns a form list (ref)
getFormListRef(): firebase.database.Reference {
  return firebase.database().ref("/formsByID");
}

In my component, I implemented the following:

// List the forms
ionViewDidLoad() {
  // Get a reference to the user's forms
  this.formProvider.getUserFormsRef().on("child_added", userFormsSn => {
    this.formList = [];
    // Retrieve and push form details based on keys from the user's forms reference
    this.formProvider.getFormListRef().child(userFormsSn.key).on("value", formsSn => {
      this.formList.push({
        id: formsSn.key,
        name: formsSn.val().name
      })
    });
  });
}

The key takeaway is that all calls to my formProvider now only return database reference objects. This approach allows me to perform a Firebase equivalent of a WHERE query in a denormalized data set.

Answer 4

With the help of @Orlandster, I finally solved the issue I was facing. The key was to simplify my providers and focus on returning references when working with Angular and Firebase. I restructured my providers into two methods:

// Returns a list of forms (ref) for the current user
getUserFormsRef(): firebase.database.Reference {
  var userRef = firebase.database().ref("/userProfiles");
  return userRef.child(this.userId).child("formsList");
}

// Returns a form list (ref)
getFormListRef(): firebase.database.Reference {
  return firebase.database().ref("/formsByID");
}

In my component, I implemented the following:

// List the forms
ionViewDidLoad() {
  // Get a reference to the user's forms
  this.formProvider.getUserFormsRef().on("child_added", userFormsSn => {
    this.formList = [];
    // Retrieve and push form details based on keys from the user's forms reference
    this.formProvider.getFormListRef().child(userFormsSn.key).on("value", formsSn => {
      this.formList.push({
        id: formsSn.key,
        name: formsSn.val().name
      })
    });
  });
}

The key takeaway is that all calls to my formProvider now only return database reference objects. This approach allows me to perform a Firebase equivalent of a WHERE query in a denormalized data set.

Utilizing Angular2 with Firebase for efficient denormalized data queries

Answer №1

Answer №2

Similar questions

Transfer the unique field name to a universal assistant

When the local server and SPA are running on different ports, utilizing an authentication cookie can help bridge the

Adjusting the button's background hue depending on the table element

Entering _this

In what manner can I retrieve this particular type?

Encountering an issue with Ionic forms: Error message NodeInjector: NOT_FOUND [ControlContainer] is displayed

Breaking up React code within the React.createElement() function

Cannot perform table inserts or creates with NestJS Sequelize functionality

Getting unique identifiers for documents in AngularFire2's Firestore collections

Issue encountered with Angular Material's md-chips and md-autocomplete: The error message "control.registerOnChange is not a

Angular-fontawesome icons are experiencing issues with their background color not scaling properly

Updating the background color using typescript

Combining Angular and Material Design: matdrawer and mattoolbar creating an overlapping effect

Looping Feature in Ionic Framework's Slides Component

Learn how to safely handle JSON vulnerabilities in Angular by removing the prefix ")]}'," from the JSON data

Efficiently managing repeated records in NodeJS using loops

A step-by-step guide on updating a deprecated typings package manually

Mysterious attributes of angular 6's <table mat-table> tag

Random Angular template string that does not contain a templateRef

Webclipse is having trouble locating a module, despite the fact that Angular CLI is able to