angular typescript does not support receiving a value in foreach loop

It seems that I'm facing an issue with retrieving the element value inside a typescript foreach loop.

constructor(db: AngularFireDatabase) { 

}
this.fbUserData = this.db.list('users/'+this.userid).valueChanges()
      this.fbUserData.forEach(element => {
        this.currentRole = element[2].toString(); // receive value
    })

Now, when attempting to retrieve the value from AngularFireBase outside the loop, I encountered the following problem:

 this.userid = this.firebaseAuth.auth.currentUser.uid.toString();
      this.fbUserData = this.db.list('users/'+this.userid).valueChanges()
      this.fbUserData.forEach(element => {
          this.rolelist.push(element[2].toString());
    })

Unfortunately, the 'rolelist' array remains empty outside the loop, even though it receives values like ['test'] inside the loop.

I aim to log 'rolelist' outside the loop using the following function:

   checkAuth(data){


  this.userid = this.firebaseAuth.auth.currentUser.uid.toString();
  this.fbUserData = this.db.list('users/'+this.userid).valueChanges()
  this.fbUserData.forEach(element => {
      this.rolelist.push(element[2].toString());
})
  console.log(this.rolelist);

This way, 'rolelist' should contain the element value obtained from the foreach loop.

Answer №1

When making a firebase call, the response will be in the form of an Observable. To access the value, you need to use .subscribe() on this.fbUserData.

this.fbUserData.subscribe(userData => {});

The function within subscribe will run every time there is a change in the data, with the new data being passed as an argument. If you do not want updates, you can use
this.fbUserData.first().subscribe(userData => {});
.
To make this work, you may need to
import 'rxjs/add/operator/first';
.

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

Is it possible to utilize the OnBlur prop based on a certain condition?

To display a component when the input is focused, follow the steps below: Click here for not focused state When you click on the text input, the component should appear like this: Click here for focused state The code snippet provided works correctly. ...

The attribute 'close' is not present in the 'Application' data type

My approach to importing expressjs looks like this: import { Request, Response, Application, Router } from 'express'; const app: Application = require('express')(); In my typings.json file: "express": "registry:npm/express#4.14.0+20 ...

Is it possible for TypeScript to automatically determine the type of an imported module based on its path?

I'm currently working on creating a function, test.isolated(), which wraps around jest.isolateModules. This function takes an array of strings representing the modules to be imported, along with the usual arguments (name, fn, timeout), and then inject ...

Avoiding circular imports in Angular modules

After restructuring my angular app from a monolithic shared feature module to smaller ones, I faced a challenge with what appears to be a cyclic dependency. The issue arises when I have components such as triggerA, modalA, triggerB, and modalB interacting ...

How can I call a global function in Angular 8?

Currently implementing Angular 8, my objective is to utilize downloaded SVG icons through a .js library. To achieve this, I have made the necessary additions to my .angular.json file: "scripts": [ "node_modules/csspatternlibrary3/js/site ...

Button click does not trigger component reload

Presented below is a button element that triggers the following action when clicked: <button mat-button (click)="toggleLikeQuestion(question['id'])" aria-label="Like this question."> {{!isQuestionLike ...

Is there a method to run code in the parent class right after the child constructor is called in two ES6 Parent-Child classes?

For instance: class Parent { constructor() {} } class Child { constructor() { super(); someChildCode(); } } I need to run some additional code after the execution of someChildCode(). Although I could insert it directly there, the requirement is not to ...

Guide to releasing a NestJs library on npm using the nrwl/nx framework

Struggling with creating a publishable NestJS library using NX. Despite reading numerous documentations, I still can't figure it out. I've developed a NestJS library within an NX monorepository and now I want to publish just this library on NPM, ...

The type x cannot be assigned to the parameter '{ x: any; }'

Currently learning Angular and Typescript but encountering an error. It seems to be related to specifying the type, but I'm unsure of the exact issue. Still new at this, so any guidance is appreciated! src/app/shopping-list-new/shopping-edit/shopp ...

Encountering an issue: JwPagination in angular 9 throws an error of "Cannot read property 'currentValue' of undefined"

Currently using Jw pagination with a page size that changes on 5, 10, or 15 using a dropdown. The Angular version being used is angular 9. The HTML code snippet for this functionality looks like: <div class="col-md-6"> <div ...

What is the meaning of "bootstrapping" as it relates to Angular 2?

I found a question that is similar to mine, but I think my case (with version 2) has enough differences to warrant a new discussion. I'm curious about the specific purpose of calling bootstrap() in an Angular 2 application. Can someone explain it to ...

What is the equivalent of specifying globalDevDependencies for npm @types packages in typings?

I am looking to update a project using tsc@2 and remove typings from my toolchain. Updating common dependencies is easy as they are listed in my typings.json file: "dependencies": { "bluebird": "registry:npm/bluebird#3.3.4+20160515010139", "lodash": ...

Clicking on the Angular Material Table will reveal the items for display

Only when I click on the table do items display. Upon initially loading the page, the table is empty for reasons unknown to me. I retrieve data from Rest-API Cloud Blobstorage and populate the empty Array with it. Check out the code snippet below: impor ...

Retrieve the TaskID of an ECS Fargate container for exporting and future use within AWS CDK code

Currently, I am leveraging CDK version 2 alongside Typescript. In my current setup, I encounter a situation where I necessitate the TaskID value from ECS Fargate Container to be incorporated into another command. The process involves me utilizing new ecs ...

When an additional data stream is introduced, Resolver is unable to effectively resolve the issue

I have been working on implementing a resolver to fetch data based on the parameters provided by the route. However, I encountered an issue where the resolver does not resolve when there is an additional data stream that my data depends on. When I direct ...

Why can't Angular iterate through objects using ngFor in Typescript?

Here's what I currently have: public posts: QueryRef<PostsInterface>; this.posts = this._postService.get(); //in ngOnInit In my HTML file, it looks like this: <mat-card *ngFor="let post of posts | async"> This allows me to display eac ...

Tips for implementing conditional styling (using else if) in a react component

Currently, while iterating through a list of header names, I am attempting to change the CSS style of a react component based on three different conditions. I have managed to make it work for one condition, but I am facing challenges when trying to impleme ...

Is there a way for me to dissect a segment of the source map produced by source-map-explorer without any reference?

I'm currently working on an Angular 12 application and I've noticed that the bundle size is unexpectedly large, even though there are only a few components in the application. After using source-map-explorer to analyze the bundle, I discovered th ...

add the string to the chat messages array in the observable

Currently, I am in the process of developing a chat application and my goal is to showcase the user's messages in the chatroom, referred to as the feed in this project. I have already implemented a function called getMessages() that displays all exist ...

Passing an Array of Objects from a Child Component to a Parent Component in Angular

I have developed two components named parent and child. These components are linked in app.component.html. In the child component, I have an array of objects that I want to display in the parent component using @Output. My desired output is to show each ob ...