"Upon the addition of a child, no response is being given

My database structure resembles the following:

https://i.sstatic.net/duWdk.png

  /*
  formsById
    formId
      usersList
        userId
  */

I am trying to retrieve a list of all users (usersList) associated with a specific formId. Below is my method implementation in the provider:

  // method to get a reference of users for a specific form
  getFormsUsersRef(formId): firebase.database.Reference {
    let formsRef = firebase.database().ref("formsById");
    return formsRef.child(formId).child("usersList");    
  }

Here is the code snippet from my component:

  // display the list of forms
  ionViewDidLoad() {
    this.sharingProvider.getFormsUsersRef(this.formId).on('child_added', fuSnap => {
      // not getting any data
      console.log(fuSnap);
    });
  }

Although the getFormsUsersRef method returns the correct database reference, the .on('child_added') event is not returning any data.

This methodology works flawlessly for another dataset in my app where the userIds are stored as Firebase uid values instead of push keys.

Any assistance would be greatly appreciated, as I have been struggling with this issue for hours now.

Answer №1

It appears that my mistake was in referring to formsById instead of formsByID - the issue has been resolved now.

getUserFormsRef(formId): firebase.database.Reference {
    let formsRef = firebase.database().ref("formsByID");
    return formsRef.child(formId).child("usersList");    
  } 

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

What is the Ideal Location for Storing the JSON file within an Angular Project?

I am trying to access the JSON file I have created, but encountering an issue with the source code that is reading the JSON file located in the node_modules directory. Despite placing the JSON file in a shared directory (at the same level as src), I keep r ...

Exporting a object in Angular2 Using TypeScript

I've been working on a small Angular2 application using Typescript and things have been going smoothly so far. My goal is to utilize a file called config that contains all the necessary settings for the application. Here's the file in question: ...

Steps to make ng-packagr detect a Typescript type definition

Ever since the upgrade to Typescript 4.4.2 (which was necessary for supporting Angular 13), it appears that the require syntax is no longer compatible. Now, it seems like I have to use this alternative syntax instead: import * as d3ContextMenu from ' ...

Implementing a fixed search bar in Angular for a dropdown selection using mat-select

I'm currently utilizing a mat-select widget from Angular-Material in my application To enhance user experience, I am adding a search bar at the top of the select dropdown for filtering options: <mat-select placeholder="Select a store" ...

How do I pass a value from my Angular2 directive into the template?

My current setup includes a template named "starrating.component.html" <ng-container *ngFor="let star of arrayStarts"> <span class="glyphicon star" aria-hidden="true" [class.glyphicon-star-empty]="activeStar>=star? false : true" ...

Uh-oh! Looks like there was an issue with the AJAX response: net::

CODE: FRONT-END $(document).ready(function(){ $('.delete-post').on('click', function(){ var id = $(this).data('id'); var section = $(this).data('section'); var url = &apo ...

Adding Material-UI icons dynamically in a React TypeScript project requires understanding the integration of imported icons

I have a collection of menu buttons with icons, stored in an array of objects. The icon names are saved as strings that correspond to Material UI icons: interface MenuButton { text: string, onClickFunction: Function icon: string } export defau ...

Angular does not automatically send cookies to the server

Currently, my front-end is built using Angular 15, while the back-end utilizes node.js version 18.10.0 and express version 4.17.2. I encountered an issue where I need to send the cookie stored in my browser back to the originating server. This cookie serv ...

Is there a way to utilize the map function to conditionally render elements in React and Firebase simultaneously?

My primary goal is to dynamically display a "Create profile" button if the user does not have a profile in Firebase, or an "Edit profile" button if the user already has a profile. I am able to successfully render the edit profile button by comparing the a ...

Ways to retrieve data from an Observable and save it in an Array categorized by a specific identifier

The data I have is structured as follows: Location: lat: 43.252967 lng: 5.379856 __proto__: Object customerId: "5cd430c65304a21b9464a21a" id: "5d5a99c62a245117794f1276" siteId: "5d0ce7c4a06b07213a87a758" __proto__: Object 1: Location: {lat: 43.249466, lng ...

How can PrimeNG PIE chart values be displayed by default instead of only on hover over the slice?

front end <td> <div class="p-col-8 ui-toolbar-group-right"> <button pButton type="button" icon="pi pi-search" (click)="populate_charts()"></button> </div> </td> TS-File ...

how to send both the useState setter and object as props to a child component in React using TypeScript

Having an issue with passing useState setter and object (both together) to the child component. Successfully passed the object by spreading it like this {...object}, but unsure of the syntax to pass the setter along as well. Here's a code example: < ...

What is the process for uploading files using AngularFire on Firebase Storage?

Despite watching multiple videos and tutorials, I am encountering a 403 error while working with Angular 1. To solve the issue of ng-model not supporting files, I created an Angular directive named file-model: app.directive('fileModel',['$ ...

Having trouble importing one of my node modules, even though the others are working fine

My file structure for Typescript is organized as shown below: src |aws folder | |__s3-controller.ts |events-service folder | |__events-service-request.ts |__index.ts In my index.ts file, I have the following exports defined: export * from './aw ...

What is the best way to rekindle the d3 force simulation within React's StrictMode?

Creating an interactive force directed graph in React using D3 has been successful except for the dragging functionality not working in React StrictMode. The issue seems to be related to mounting and remounting components in ReactStrict mode 18, but pinpoi ...

Displaying decimal values in Angular as percentages

In my Angular application, I have a numeric textbox that displays a percentage value and allows users to update it. https://i.stack.imgur.com/eCOKe.png <label for="fees">Fees %</label> <div class="inpu ...

How do I insert items into an ES6 Map using a specific object key/value type in Typescript?

I'm looking to utilize Maps instead of object maps to define keys and values. However, it appears that Typescript doesn't fully support index types for ES6 Maps. Are there any alternatives or workarounds available? Furthermore, I want to enforce ...

Navigate to a different page using Angular with a simple click

How can I implement a redirect from clicking on the "Firms" word to another component page in Angular? I have tried using routerLink="/", [routerLink]="['/']". I have imported Routes in the app.module. I have also attempted this approach: import ...

What could be causing the "ng not found" error as I try to deploy my Angular application on Heroku?

Here is the structure of my project: package.json (A) index.js client > package.json (B) This is how the outer package.json (A) is set up : { "name": "---", "version": "1.0.0", "description": "---", "main": "index.js", "scripts": { "sta ...

Insert an ellipsis within the ngFor iteration

I'm currently working with a table in which the td elements are filled with data structured like this: <td style="width:15%"> <span *ngFor="let org of rowData.organization; last as isLast"> {{org?.name}} ...