Exploring techniques to retrieve data from Json Array in Angular using Firebase documentation

this.currentUser$=this.afs.doc('users/'+this.authState.uid).valueChanges().pipe();

When I include it in my component.html file like this:

{{ currentUser$|async|json}}

The output I get is as follows:

{
  "photoUrl": "",
  "password": "",
  "mobileVerified": true,
  "id": "izoNRvk0moN579KqfQ1cVqNvpZJ2",
  "phone": "5544663311",
  "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4322272e2a2d03263b222e332f266d202c2e">[email protected]</a>",
  "name": "Rob B",
"oscar-winner": "admin"
}

If you want to access only the email or userRole, how can you achieve that?

angulartypescriptangularfire

Answer №1

Assign a new value to pipe.

currentAccount$: Observable<Account>;
currentAccount?: Account;

 :

 this.currentAccount$ = this.firestore.collection('accounts/'+this.userId).valueChanges().pipe(
  tap( info => {
    this.currentAccount = info;
  })
 );

Now you can retrieve and use each attribute.

{{currentAccount?.name}}
{{currentAccount?.balance}}

Answer №2

After following the guidance found here, I was able to retrieve values from a single document in a firebase collection. However, I did need to make a slight adjustment by changing currentUser<User> to 

currentUser<User | undefined>
in order for it to function correctly.

private userDoc: AngularFirestoreDocument<User>;
currentUser: Observable<User | undefined>;

Within the constructor:

this.userDoc = afs.doc<User>('users/' + this.docId);
this.currentUser = this.userDoc.valueChanges();

When accessing this in component.html, I can utilize it like so:

{{(currentUser|async)?.email}}
{{(currentUser|async)?.userRole}}

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

Alert: TypeScript Linter Warning

When I execute the npm lint command in Circle CI, a warning message is displayed. The following rules specified in the configuration could not be found: templates-use-public no-access-missing-member invoke-injectable template-to-ng-templa ...

angularnpmlinttslint

Insert a new row below an existing row within a Material table

Is it possible to dynamically insert a new row under a specific existing row in a table within the DOM without having to redefine all of the data in the MatTableDataSource? ...

angularangular-materialrow

Running Jasmine asynchronously in a SystemJS and TypeScript setup

I am currently executing Jasmine tests within a SystemJS and Typescript environment (essentially a plunk setup that is designed to be an Angular 2 testing platform). Jasmine is being deliberately utilized as a global library, rather than being imported vi ...

javascripttypescriptjasminesystemjs

Issue with Angular 6 subscribe event not being caught by subject?

A new element was crafted to house a loader: @Component({ selector: 'app-loader', templateUrl: './loader.component.html', styleUrls: ['./loader.component.scss'], providers: [LoaderService] }) export class LoaderCompon ...

javascriptangular

Output the initial value and subsequently disregard any values emitted during a specified time interval

Check out my code snippet: app.component.ts notifier$ = new BehaviorSubject<any>({}); notify() { this.notifier$.next({}); } app.component.html <div (scroll)="notify()"></div> <child-component [inp]="notifier$ | async" /> ...

javascriptangularrxjsobservable

Turning off @Output as Observable: A step-by-step guide

I have a query regarding unsubscribing Outputs in Angular. While I am aware that EventEmitter is automatically cleaned up, there was a time when I needed to use an Observable as my Output. Specifically, I wanted to take an Output that emitted events at mos ...

angularrxjsrxjs5

Angular and Firestore, when combined, present a unique challenge as the queries

After upgrading the code of an outdated project to the latest versions of Angular and RxJs, I made every effort to update the code as thoroughly as possible. Here is a link to my previous code However, I am now encountering the issue of receiving undefin ...

angulartypescriptfirebaserxjs

Here's a revised version: "How to link a lambda layer with a function in a serverless.ts file using the

When working with the serverless framework using the typescript template, a serverless.ts file is generated. I am currently integrating lambda layers with existing functions and encountering a typescript error. The error message reads: "Type '{ Ref: ...

typescriptserverless-frameworkprisma

New behavior in Vue 3: defineEmits is causing issues with defineProps data

Currently, I am working with Vue 3 and TS 4.4. In one of my components, I am using defineProps to define prop types. However, when I try to add defineEmits, VS Code starts indicating that my props variable is not recognized in the component template. Below ...

javascripttypescriptvue.jsvuejs3

Ways to ensure that when changes occur in one component, another component is also updated

How can I update the cart badge value in the navbar component every time a user clicks the "Add to Cart" button in the product-list component? The navbar component contains a cart button with a badge displaying the number of products added to the cart. n ...

htmlangulartypescript

Angular mistakenly redirects to the local host at port 4200 with a hash symbol

After using this.router.navigate(['newcard']);, the URL loads correctly but then quickly redirects to localhost:4200/#. This is how I am redirecting from the showcard component to the newcard component: <a href="#" class="btn b ...

angulartypescriptangular2-routing

Ordering Server Responses with Angular's httpClientAngular's httpClient allows

Utilizing theHTTPClient module to automatically map data in a service, which then uses http.get to connect to a remote API. I subscribe to this service in a component that calls it multiple times within a loop. for (let i of this.symbols) { this.serv ...

angularhttpclientsubscribe

A guide on logging errors triggered within reducers

I'm facing a challenge in Redux where I am unable to get error messages logged to the console. My stack includes React, Redux Toolkit, and TypeScript. Here is a snippet of one of the reducers I've implemented: // Reducer const removeResourceRedu ...

reactjstypescriptreduxreact-reduxredux-toolkit

Unit testing Angular components can often uncover errors that would otherwise go unnoticed in production. One common

I need assistance writing a simple test in Angular using Shallow render. In my HTML template, I am utilizing the Async pipe to display an observable. However, I keep encountering the following error: Error: InvalidPipeArgument: '() => this.referenc ...

typescriptjasmineangular11

Lazy loading in Angular allows you to navigate directly to a certain feature component

I'm currently working on implementing lazy loading in Angular 6, and I want to include links on my main homepage that direct users to specific feature components. Here is the hierarchy of my project: app.module.ts |__homepage.component.ts |__options ...

angulartypescript

Guide on installing MathType plugins for CKEditor 5 in an Angular 8 environment

Encountering an issue while attempting to utilize MathType in CKEditor Error message at ./node_modules/@wiris/mathtype-ckeditor5/src/integration.js 257:98 Module parse failed: Unexpected token (257:98) A proper loader may be required to handle this file t ...

angulartypescriptckeditor5mathtype

What is the most effective method for handling numerous HTTP requests upon the initialization of an application?

Within my Angular application, I am facing the challenge of executing multiple (6) HTTP requests from different sources during initialization. Currently, I am using app_initializer and promise.all() to achieve this. However, the issue lies in the fact that ...

angular

Tips for invoking an Android function from an AngularJS directive?

I am facing an issue with my HTML that uses an AngularJS directive. This HTML file is being used in an Android WebView, and I want to be able to call an Android method from this directive (Learn how to call Android method from JS here). Below is the code ...

javascriptandroidangularjstypescript

Angular 8: Implementing functionality for the Parent Component to detect when the User clicks outside of the Child Component Textbox

I am working on a scenario where I have a Parent Component and a Child Component containing a Formbuilder and a ZipCode textbox. Is there a way to notify the Parent Component when the user clicks out of the Child Component Textbox? I need to trigger some ...

angulartypescriptangular8

Is it possible for a class method in Typescript to act as a decorator for another method within the same

Can we implement a solution like this? class A { private mySecretNumber = 2; decorate (f: (x :number) => number) { return (x: number) => f(this.mySecretNumber * x); } @(this.decorate) method (x: number) { return x + 1; } } I h ...

typescript