Tips for iterating through an observable using the .subscribe method

I am currently working on a function that involves looping and using .subscribe to receive an array object each time, with the intention of later pushing this data into another array. The loop itself is functional; however, there is an issue with the results not aligning with expectations. Instead of printing the same array 20 times, the .subscribe part is printing the first array and then null arrays for the subsequent iterations. This behavior contradicts my understanding based on experience with other programming languages, as it first prints "Test" 20 times before moving inside the subscribe block.

Function:

testingFunction()
{
   let i: number = 0;

   while(i < 20){

   console.log("Test");

   this.testService.getAll().subscribe((object: any[]) => {
      console.log(object);
   })

    i++;
  }
}

Answer №1

If you are working with Angular, you have the advantage of leveraging RxJS operators to manage such a situation. The use of the forkJoin operator allows you to synchronize the completion of the while loop operation before returning all observables.

Here is how you can utilize this operator:

performOperation() {
   let index: number = 0;
   const observableList = [];

   while(index < 20){
     observableList.push(this.testService.getAll());
     index++;
   }
   forkJoin(observableList).subscribe((result) => {
     console.log(result);
   });
}

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

Add a calendar icon to the DateRangePicker in React Mui

I am trying to set up a DateRangePicker using Material UI with a calendar icon. Here is an example of how I want it to look: https://i.stack.imgur.com/LnYnY.png After following the API documentation and using this code: components={{ OpenPickerIcon: Cal ...

Retrieve data from a table within an Angular component

Struggling with the ng2-smart-table library, I am facing challenges in passing values entered in the edit line to a custom component: Refer to the code snippet below for passing Maximum and Minimum Temperature values to the SmartTableEditorFunctionsCompon ...

Generate a new Angular component by only creating the TypeScript file

As a newcomer to Angular, I recently purchased the Metronic theme. After installing all necessary components, including the latest version of angular CLI, I encountered an issue. Whenever I run the command ng generate component test, it only creates a test ...

Ways to compel string type or disregard type?

When using the following code snippet: <Image src={user?.profilePictureUrl} alt={user?.name} /> An error is encountered: Type 'string | null | undefined' is not assignable to type 'string | StaticImport'. Type 'undefined ...

Properties of a child class are unable to be set from the constructor of the parent class

In my current Next.js project, I am utilizing the following code snippet and experiencing an issue where only n1 is logged: class A { // A: Model constructor(source){ Object.keys(source) .forEach(key => { if(!this[key]){ ...

Tips for fixing the error "Module cannot be found" when testing Typescript in a Github Action

Whenever I use the Github Actions Typescript template to create a new repo and then check it out locally, I face a recurring issue: While I can work on the source code in VS Code without any problems and follow the steps mentioned in the template's re ...

Unable to establish a connection between the HTML element and the TypeScript variable

I'm facing an issue with my code where the function that worked perfectly for register and login is not functioning properly on the index page. Even though there seems to be no errors in the login and register functions, I have a form with an input s ...

Using Angular, you can easily add a <div> dynamically to all elements that share a class

In order to implement a solution, I am tasked with adding a new div element with the class '.cart-list-value .delete-product', which will contain a background image, to all elements that have the class .cart-list-item. Although I successfully man ...

What is the best approach: Developing a class or a service to handle multiple interfaces?

My current project involves creating multiple interfaces, and I would like to keep them separate for clarity. Would it be wise to do this in a service or a class? Additionally, is it possible to utilize dependency injection for classes? Thank you for your ...

tips for managing response time in firebase authentication state

I've been facing an issue with my web application in efficiently checking if it is firebase authenticated. The 'auth state object' doesn't seem to be functioning correctly on my template, as the expected sections are not appearing at al ...

Reversing a Firebase list in Angular 2 after inserting a new item: A step-by-step

I am currently looking for a solution to reverse my Firebase list in real-time. For instance: Let's say I have the following Firebase list: {apple, orange, banana}; == After reversing => {banana, orange, apple} If I were to add a new item (with ...

Strict mode does not allow duplicate data properties in object literals within JavaScript

Challenge Description I am facing an issue with handling an optional variable called ByteRange. To accommodate this, I included 2 different URLs in the $resource. Upon doing so, I encountered the following error: Message: Error in parsing: "tools/tes ...

I encountered an issue when attempting to display a validation message on an Angular form

As I work on creating an Angular form and implementing validation, I encountered an issue when attempting to display a message when a field is left empty. My approach involved using ng-for in a span tag, but unfortunately, an error occurred. Here is the H ...

Leveraging Typescript in Firebase Cloud Functions to effectively work with intricate interfaces

When querying a collection on the app side, I am able to automatically cast the result as an interface using Positions constructor that takes in interface IPosition. However, attempting to do the same on the cloud functions side prevents the functions fro ...

Issue with Angular 17 button click functionality not functioning as expected

Having trouble with a button that should trigger the function fun(). Here's the code snippet I'm using. In my TS file: fun(): void { this.test = 'You are my hero!'; alert('hello') } Here is the respective HTML: &l ...

What are the steps to setting up SystemJS with Auth0?

I am having trouble configuring SystemJS for Auth0 (angular2-jwt) and Angular 2.0.0-beta.6 as I keep encountering the following error message: GET http://localhost:3000/angular2/http 404 (Not Found)fetchTextFromURL @ system.src.js:1068(anonymous function) ...

Ways of utilizing a dynamic key for invoking a resource from prisma

Currently, I am attempting to implement a more general method to retrieve data from Prisma. The function in question appears as follows: import { Prisma, PrismaClient } from '@prisma/client'; import { NextApiRequest, NextApiResponse } from ' ...

What is the best way to save an array of objects from an Axios response into a React State using TypeScript?

Apologies in advance, as I am working on a professional project and cannot provide specific details. Therefore, I need to describe the situation without revealing actual terms. I am making a GET request to an API that responds in the following format: [0: ...

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

retrieve data from URL parameters (navigation backward)

When navigating from the main page to the transaction page and then to the details page, I have implemented a go back feature on the details page. Using the state, I pass data when navigating back so that I can access it again from the transaction page. H ...