What is the process for returning to the function level?

I'm working on a function called loadMessages that I want to return an Observable.

  loadMessages(chatId: string): Observable<Message[]> {
    console.log('1');

    this.autorun(() => {
      const handle = this.subscribe('messages', chatId);

      if (handle.ready()) {
        console.log('2');

        const messages = Messages.find().fetch();
        return Observable.of(messages);  // the return statement here is unnecessary for this function
      }
    });

    console.log('3');  // my goal is not to immediately execute this line

    // Although I wish I could return here, it's not feasible in this context
  }

How can I navigate back to the function level?

Currently, the sequence of execution is 1 -> 3 -> 2. Is there a way to change this to 1 -> 2 and then pause until I receive the data?

Answer №1

If you're looking to implement a function like this, consider the following code snippet:

loadContent(contentId: string): Observable<Content[]> {
  console.log('1');

  return Observable.create(observer => {
    this.autorun(() => {
      const handle = this.fetchData('content', contentId);

      if (handle.ready()) {
        console.log('2');

        const content = Content.find().fetch();
        observer.next(content)
      }
    });
  });
}

An easy-to-follow example can be found at http://plnkr.co/edit/GADtB8QCTnNubtRu9SFv?p=preview

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

Elevate your Material UI Avatar with an added level of

Attempting to give a MUI Avatar component some elevation or shadow according to the documentation provided here. <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" /> Enclosing the Avatar within a paper or Card element increases the size o ...

Issue with numeric values not rendering properly using range slider in Ionic

In my Ionic project, I am attempting to create a range slider for selecting an age between 0 and 25 years old. The goal is to display the selected number when sliding, such as: "I'm 21 years old" Currently, my code is functional. However, it does no ...

Issue with dispatching actions in React using TypeScript and hooks

Can you please point out what I'm doing wrong here: I am encountering the following error Type '{ wishList: any; addBookToWishList: (book: any) => void; }' is not assignable to type '{ wishList: never[]; }'. Object literal may ...

Facing issues with error message due to update in Angular 2 RC2 forms upgrade

I am currently in the process of upgrading my forms from RC1 to RC3. I made changes where necessary but I still keep encountering the following error: There is no directive with "exportAs" set to "ngForm" (" <input id="language" type="text" [( ...

Why is type assertion required for TS array mapping?

This particular piece of code is causing an error: function myFilter(debts:Map<string, number>) : Map<string, number>{ return new Map([...debts] .map(d => [d[0], Math.round(d[1] * 10) / 10]) // error .filter(d => d[1] != 0) ) ...

Using JSDoc with "T extending Component"

get_matching_components<T extends Component>(component_type_to_return: { new (doodad: Doodad): T }): T[] { return this.components.filter(component => component instanceof component_type_to_return) } In TypeScript, I created a method to retrie ...

Issues have been reported with Angular 10's router and anchorScrolling feature when used within a div that is positioned absolutely and has overflow set

I feel like I may be doing something incorrectly, but I can't quite pinpoint the issue. Any help or pointers would be greatly appreciated. My current setup involves Angular 10 and I have activated anchorScrolling in the app-routing.module file. const ...

Leveraging Angular modules within web workers

Currently, I am attempting to leverage the Angular 8 JIT compiler within a WEB WORKER. Unfortunately, when trying to import the Compiler module or any other Angular module in the web-worker.ts file, I encounter an error. /// <reference lib="webworker ...

Sending an ID from an array within a *ngFor loop to a different component in Angular: a step-by-step guide

I have a collection of items that I loop through using ngFor. My goal is to pass all its attributes to another component. I attempted to accomplish this with the following code: *ngFor='let item of postList [routerLink]="['/detailed-post&ap ...

The Angular project failed to run properly following the ng build command

Just started working with Angularjs 2 and encountered an issue after running ng build. The compiled files were placed in the dist folder, but when I checked the index.html file within that folder, all the scripts had missing references even though they w ...

Having trouble with the 'plugin not installed' error when using ionic-native/network-interface?

After following the official documentation, I am using ionic-native/network-interface to retrieve the IP address of the wifi network I am connected to. However, I am encountering an error stating that the plugin is not installed. Here is the code I have i ...

Changing the order of a list in TypeScript according to a property called 'rank'

I am currently working on a function to rearrange a list based on their rank property. Let's consider the following example: (my object also contains other properties) var array=[ {id:1,rank:2}, {id:18,rank:1}, {id:53,rank:3}, {id:3,rank:5}, {id:19,r ...

Tips for accessing the 'this' context of the Class in a TypeScript Angular 1.4 directive

Recently, I encountered a problem while using bindToController in my angular directives. Specifically, I was struggling to access properties of the class MultiSelect within my controller method. In this context, 'this' refers to the $scope due to ...

Experiencing difficulties with ngModel binding and ngForm imports despite the seemingly correct code. Encountering several strange issues, could this be due to compatibility issues with Angular

ERROR in src/app/Register/register.component.html:12:9 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. 12 [(ngModel)]="model.UserName" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src ...

Creating a Route in Angular 2 for a Component other than the one initialized with the bootstrap function

I am currently in the process of working on a project involving Angular2. If you are interested in understanding why I need to do what I am about to explain, please take a look at this issue. The main component in my project is called AppComponent and it ...

The functionality of the Ionic 4 app differs from that of an Electron app

I've encountered an issue with my Ionic 4 capacitor app. While it functions properly on Android studio, I'm having trouble getting it to work on Electron. Any ideas on how to resolve this? Here are the steps I took to convert it to Electron: np ...

What are the steps for running the Dist Folder on a Local Machine in Angular 6 and above?

Currently working on an application with Angular6+. After running the command ng build --prod, a dist folder was generated. How can I view or serve this folder on Localhost? ...

Alert: VirtualizedList warns of slow updates for a large list despite optimized components

Struggling with avoiding the warning message "VirtualizedList: You have a large list that is slow to update" while utilizing the <FlatList> component in React-Native. Despite thorough research and attempts at finding a solution, including referencin ...

Having difficulty transitioning a function with a promise from JavaScript to TypeScript

I am currently in the process of transitioning my existing NodeJS JavaScript code to TypeScript for a NodeJS base, which will then be converted back to JavaScript when running on NodeJS. This approach helps me maintain clear types and utilize additional fe ...

Retrieve TypeScript object after successful login with Firebase

I'm struggling with the code snippet below: login = (email: string, senha: string): { nome: string, genero: string, foto: string;} => { this.fireAuth.signInWithEmailAndPassword(email, senha).then(res => { firebase.database().ref(&ap ...