Accessing data from Firebase Database Object

I am currently facing a challenge in extracting a username value from my firebase database and then displaying it in a console log statement. The issue lies in fetching the child value instead of just the object. How can I retrieve the child value and print it out?

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

getUsername.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseObjectObservable, FirebaseListObservable  } from 'angularfire2/database';

@IonicPage()
@Component({
  selector: 'page-profile-setup',
  templateUrl: 'profile-setup.html',
})
export class ProfileSetupPage {
  profileData: FirebaseObjectObservable<Profile>

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase) {

  showUsername($event) {
    let data = this.profileData = this.afDatabase.object(`profile/`)
    console.log(data.username);
  }
 }
}

Answer №1

In order to access the data, you must first subscribe to it and store it in an object.

Answer №2

Create an interface called user with properties username and age. Import this model into getUsername.ts. Ensure to pass the unique userid as an argument.

displayUsername($event) {
    let data = this.afDatabase.object(`profile/`+<string>userid);
    data.valuechanges().subscribe(user => console.log(user.username));
  } 

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 process for implementing mandatory field validation on a group of checkboxes?

Looking for assistance with Angular 2 Checkbox Selection: Check out the updated code snippet below: HTML <b><label *ngFor="let type of topics;let i=index" class="checkbox-inline"> <input type="checkbox" id="{{'ch ...

Ways to implement a changing value for the firebase cloud function configuration setting known as vpcConnector

I have a Firebase cloud function that I am trying to create: import * as functions from "firebase-functions"; export const myCloudFunction = functions .runWith({vpcConnector: process.env.VPC_CONNECTOR}) .region("asia-south1").h ...

Angular2 encounters an error when processing a custom HTTP request

I offer two unique services Custom HTTP client service fetch(url):any{ this.storage.fetchData('auth-token').then((token) => { let headers = new Headers(); this.prepareHeaders(headers); return this.http.fetch(url+"?token="+toke ...

Is it possible to utilize an ng template within one component and then reference its template in another HTML file?

I'm experimenting with using ng-template in a separate component and referencing it in other parts of the html. Is this possible? I've tried different approaches but seem to be missing something. Can you help me understand where I might be going ...

platform designed for handling various fields of identical types

I am dealing with multiple transactions that I intentionally do not want to group into an array. Instead, I prefer to separate them as individual fields. For example: { ['fixtureId']: { transactionId: string; donation: boolea ...

Navigating to the end of a list using Angular's scroll feature

I'm trying to figure out how to automatically scroll to the bottom of a list in TypeScript, can someone help me with this? Here's a similar example I found that uses jQuery (I specifically need it in TypeScript): Scroll to bottom of list wit ...

Typescript Error:TS2345: The argument '{ theme: string; jsonFile: string; output: string; }; }' is not compatible with the parameter type 'Options'

Encountering an error mentioned in the title while using the code snippet below: import * as fs from 'fs' import { mkdirp } from 'mkdirp' import * as report from 'cucumber-html-reporter' const Cucumber = require('cucumber ...

Unable to send JSON data from server to client following a successful file upload operation

I'm currently working on a project that involves NodeJS, Express, JQuery, and Typescript. The issue I'm facing is related to uploading a file from the front end, which is successful. However, I'm encountering difficulties in returning a JSON ...

The error message "Property 'listingSub$' is not initialized in the constructor and is not definitely assigned" needs to be addressed and fixed in the code

import { Subscription } from "rxjs"; @Component({ selector: 'app-listing-detail', templateUrl: './listing-detail.component.html', styleUrls: ['./listing-detail.component.scss'] }) export class ListingDetailCo ...

Error in Angular ESLint: The key parameter is mandatory

I'm attempting to download a file using the Angular code below, but I consistently receive an error stating Parameter "key" required const headerValues = new HttpHeaders({ 'Content-Type': contentType!, 'Accept': contentTy ...

Repositioning the initial location of mat-slider

Currently, I am working on the mat-slider component and I have a specific requirement. I need to position the thumb in the middle and allow it to slide both left and right. Here is my code: https://stackblitz.com/edit/angular-9unenq-utcytk?file=app%2Fslid ...

The wrong parameter is used to infer the generic function type argument in TypeScript

When using the code snippet below and not explicitly specifying T at function call, such as getOrPut<Item>(...), it is inferred from the create parameter. However, this can lead to the created item type being incompatible with the obj dictionary, as ...

Issue with rejecting a promise within a callback function in Ionic 3

Within my Ionic 3 app, I developed a function to retrieve a user's location based on their latitude and longitude coordinates. This function also verifies if the user has location settings enabled. If not, it prompts the user to switch on their locati ...

How do I set class properties in TypeScript using an array of values for initialization?

My constructor has the following structure: constructor(values: Object = {}) { //Constructor initialization Object.assign(this, values); } However, it currently requires named initialization like this : new Inventory({ Name: "Test", ...

Single-use binding format

I am a beginner with Angular and I have some doubts about the syntax used in Angular. In AngularJS, we can achieve one-time binding like this: <p>{{::myVar}}</p> In Angular, I know we can do it differently. <p [innerText]="myVar"></ ...

Encountering an issue while trying to retrieve data from Firebase using React

I encountered an issue while trying to retrieve data from a Firebase collection. Can someone assist me with this error message? Error: The context from react-redux is not recognized. For those using react-redux v6, it requires a v3 version of react-redu ...

What is the method to access the value of a different model in ExpressJs?

I am working on a MEAN stack and have a model for employee information. I want to include the store name where they will work from a separate stores model. Can you review my approach below? Employee Model: var mongoose = require('mongoose'); va ...

Setting up only two input fields side by side in an Angular Form

I'm fairly new to Angular development and currently working on creating a registration form. I need the form to have two columns in a row, with fields like Firstname and Lastname in one row, followed by Phone, Email, Password, and Confirm Password in ...

Executing a function on a child component solely based on the parent component's observable in Angular4

"To put it simply: I want to make only one HTTP request and share that data with all components. The challenge is that the other components start running before I receive the response from the initial HTTP request. All components are just extracting pieces ...

Having trouble with shared HTML in Angular 4 not functioning as thought?

I have implemented a shared HTML code for search functionality across multiple pages search.component.html <form class="p-2" (ngSubmit)="searchHere(query)" #customersearch="ngForm"> <div class="input-group custom-search-form float-right"> ...