Ways in which this data can be best retrieved

Hey there, I'm currently in the process of building an Ionic2 app with Firebase integration. Within my codebase, there's a provider known as Students-services where I've written a function to navigate through a node, retrieve values, and display them in an array. While everything seems to be functioning properly, I seem to be encountering an issue when attempting to return data to my page.ts file.

Below is the snippet from students services:

settropies(userId) {
  let total = 0;
  let result = [];
  let query = this.userProfile.child(userId+'/exams/').orderByKey();

  query.on("value",(snapshot) => {
    snapshot.forEach((childSnapshot) => {
      var key = childSnapshot.key;
      var childData = childSnapshot.val();

      total = total + childData.marks;
      result.push(total);
      this.marksarray = result;  
    }); 
    this.marksarray = result;
    console.log(this.marksarray[1]);
  });
  return this.marksarray;
}

I've called the function within my page.ts file:

console.log(this.studentservice.settropies(studentId));

Answer №1

Upon your return, the array becomes undefined due to

  query.on("value",(snapshot)=> {

being an asynchronous event.

To resolve this issue, consider utilizing eventEmitter

Within your service:

   public finished$ = new EventEmitter<any>();

 snapshot.forEach((childSnapshot)=> {
        var key = childSnapshot.key;
         var childData = childSnapshot.val();
         total=total+childData.marks;
         result.push(total);
         this.marksarray=result;  
          this.finished$.emit(result);
      }); 

Then, in your page.ts file

    constructor(){

        this.studentservice.$finished.subscribe((result)=>{
            console.log(this.studentservice.settropies(studentId));

       });
    }

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

Creating a NgFor loop in Angular 8 to display a dropdown menu styled using Material

I'm currently facing an issue with incorporating a Materialize dropdown within a dynamically generated table using *ngFor. The dropdown does not display when placed inside the table, however, it works perfectly fine when placed outside. <p>User ...

I encountered an issue where I did not receive a response when utilizing res.write() within the fetch function

Currently, I am utilizing the <res.write()> method in nodejs at https://nodejs.org/api/http.html#responsewritechunk-encoding-callback. In addition to this, I am also implementing the fetch function which can be found at https://developer.mozilla.org/ ...

"Exploring the world of Ionic 2: uncovering its public variables

I'm facing an issue with Ionic 2, specifically with Angular. My concern revolves around a variable called "isConnected". I am unable to access it from an internal function within a function as it gives me an error saying "can't define property of ...

Ways to make an element disappear when clicking outside of it in Angular 7 or with CSS

After entering text into an input field and pressing the space key, a div called 'showit' will be displayed. However, I want this div to hide when clicking outside of it. See the code below for reference: home.component.html <input type="tex ...

What is the process for sending an email using Angular 6 and ASP.NET CORE web api?

When a user inputs their email and password in the designated boxes, they also include a recipient email address with a CC. This information is then sent via a web api. The email will contain text like "Total Sales Today" along with an attached PDF file. ...

Tips for patiently waiting for a method to be executed

I have encountered a situation where I need to ensure that the result of two methods is awaited before proceeding with the rest of the code execution. I attempted to use the async keyword before the function name and await before the GetNavigationData() me ...

The concept of TypeScript usage within the `mui-x` DataGrid while calling the `useGridApiRef()` function

Could someone please help me understand the syntax used in this code snippet from mui/mui-x? export declare const useGridApiRef: <Api extends GridApiCommon = GridApiPro>() => React.MutableRefObject<Api>; My interpretation is that it exports ...

typescript: the modules with relational paths could not be located

As part of a migration process, I am currently converting code from JavaScript to TypeScript. In one of my files 'abc.ts', I need to import the 'xyz.css' file, which is located in the same directory. However, when I try to import it usi ...

I'm curious, where does Visual Studio create the dist folder when you run an Angular Web Application?

Currently utilizing Visual Studio 2019 Community Edition, although the same situation also pertains to VS2017 and other editions of 2017/2019. While developing/running an ASP.NET Core Web Application with an Angular web project, I'm unable to locate ...

Using Typescript and React to assign an array object to state

Here is the situation: const [state, setState] = useState({ menuCatalog: true, menuCommon: true, fetched_data: [] }); An example of data I am trying to set to the state property "fetched_data" looks like this: [{"id": 1, "name": "some_name", " ...

React: Issue with input values not correctly updating across multiple fields when changing state toggles

I am working on a React component that needs to update input values for multiple players independently. However, I am facing an issue where toggling a state causes the first input's value to incorrectly propagate to all other inputs. Additionally, cle ...

There is no way to convert a strongly typed object into an observable object using MobX

I have been utilizing the MobX library in conjunction with ReactJS, and it has integrated quite smoothly. Currently, I am working with an observable array structured as follows: @observable items = []; When I add an object in the following manner, everyt ...

Eslint highlighting the initial function declaration within a Vue script

I'm currently creating a Vue file using a Typescript script, and encountering an unusual Eslint "error." The issue arises on line 15 with this specific complaint: Parsing error: Unexpected token, expected "," Interestingly, this error only occurs wi ...

An issue arises when utilizing a string variable in React-bootstrap's OverlayTrigger placement attribute

I encountered an unexpected issue with the OverlayTrigger component in React-Bootstrap version 5.1.1. I'm attempting to develop a custom button component using OverlayTrigger and a standard button. Everything is functioning as intended, except for whe ...

What is the best method to compare two times and determine if they fall on the same date within an Angular 2/4 application? The time should be in the format of "HH:mm AM

Is there a way to validate if my time period falls on the same date? let startTime = currentSelection.startTimeHr + ":" + currentSelection.startTimeMin + " " + currentSelection.startTimeAMPM; let endTime = currentSelection.stopTimeHr + ":" + currentSele ...

Tips for integrating external libraries (npm packages) in Ionic 4 applications

With the changes in Ionic 4, I am seeking a definitive guide on implementing third party libraries, such as "rss-parser". I have reviewed this article which seems to be the latest resource on the topic: https://ionicframework.com/docs/v3/developer-resour ...

How can the component prefix be replaced or updated in Angular 8/9?

Is there a way to efficiently replace or modify the outdated component prefix all at once? OR How can I create a dynamic prefix system that automatically updates all component prefixes whenever changes are needed? ...

Using Typescript and ThreeJS, include new elements to the environment within the loader

Can someone help me with the following code snippet? export class LandingPageComponent implements OnInit { scene: THREE.Scene; (...) ngOnInit() { this.scene = new THREE.Scene(); var loader = new THREE.JSONLoader(); loader.load("../../assets/fire_lion.j ...

What are the steps to manually activate input validation in Angular 2?

Having two inputs is the scenario here: The first input undergoes custom validator application The second input has a dynamic and editable value utilized in the custom validator If the custom validator is applied on the first input, then focus shifts to ...

Alter the data displayed by the Radio button using Angular when the Submit button is clicked

I've encountered an issue where I need to alter a div based on the selection of a radio button. Currently, it changes instantly upon button click, rather than waiting for submission. My desired outcome is for the value to be submitted when the button ...