Using a loop variable within a callback function in JavaScript/TypeScript: Tips and tricks

I have a method in my TypeScript file that looks like this:

getInitialBatches() {
    var i = 0;
    for (var dto of this.transferDTO.stockMovesDTOs) {
        i++;

        this.queryResourceService
            .getBatchIdUsingGET(this.batchParams)
            .subscribe((data) => {
                this.allBatches[i] = data;
            });
    }
}

Due to getBacthIdUsingGET being a callback function, it is not working as intended. The loop control variable i gets incremented by more than 1 by the time the callback is invoked, resulting in values being placed into random indexes of the allBatches array. How can I resolve this issue?

javascriptangulartypescript

Answer №1

One common issue that arises with variables in loops is their behavior, particularly when using the let keyword as per the specification to ensure proper functionality.

It's generally advisable to steer clear of using vars due to their peculiarities in certain scenarios and how they handle scoping.

getInitialBatches() {
    for (let i = 0; i < this.transferDTO.stockMovesDOTs.length; ++i) {
        this.queryResourceService
            .getBatchIdUsingGET(this.batchParams)
            .subscribe((data) => {
                this.allBatches[i] = data;
            });
    }
}

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

Navigate Formik Fields on a Map

Material UI text-fields are being used and validated with Formik. I am looking for a way to map items to avoid repetitive typing, but encountering difficulties in doing so. return ( <div> <Formik initialValues={{ email: '&a ...

javascriptreactjstypescriptmaterial-uiformik

Node(Meteor) experiencing a memory leak due to setTimeout

I have encountered an unusual memory leak associated with the use of setTimeout. Every 15 seconds, I execute the following code using an async function that returns an array of promises (Promise.all). The code is supposed to run again 15 seconds after all ...

javascriptnode.jsmeteormemory-leakssettimeout

Search a location database using the user's current coordinates

Currently, I am working on a project that involves a database containing locations specified by longitude and latitude. Upon loading the index page, my goal is to fetch the user's location and then identify every point within a certain distance radius ...

javascriptpythonmysqlhtmlgeolocation

How come the index variable doesn't show the index in *ngFor loop in Angular 2?

When working with ng-repeat in Angular 1 to display the index, this code is used: <div ng-repeat="car in cars"> <ul> <li>Index: {{$index+1}}</li> <li>Car Name:{{car.name}}</li> </ul> </div> However, w ...

javascriptangularloopsngfor

Error message: 'Encountered issue with react-router-V4 and the new context API in React

Currently, I am experimenting with the integration of React Router V4 alongside the new React context API. Below is the code snippet I am working with: class App extends Component { static propTypes = { router: PropTypes.func.isRequired, ...

javascriptreactjsreact-router-v4react-context

Verify the presence of values in several textarea fields with jQuery before executing a specified action

My main goal is to validate multiple dynamic forms on a single page. If all textareas are either empty or contain default values, I need a specific function to be executed. However, if any of the textareas have content that deviates from the default value, ...

javascriptjqueryforms

Leverage native dependencies in AWS CodeBuild for an Angular project

I am facing an issue with a build project on CodeBuild. One of the dependencies required for the project is located on the build machine itself, specifically in my own directory. The specific section in package.json that mentions this dependency is: &quo ...

angularamazon-web-servicesnpmaws-codebuild

What is the best way to manage multiple tsconfig files for an Angular application?

Our customer has requested that we have two separate applications (with navigation from appA to appB) in one single package for easier deployment. However, we face a challenge as one section is coded in typescript with jQuery and the other is built in Ang ...

angulartypescriptcompilationtsconfig

Is the PHP Ajax parameter missing during the upload process?

I'm attempting to do a simple upload, but I seem to be struggling. It could be that I'm not understanding it properly, or perhaps it's just too late at night for me to figure it out. After doing some research, I came across this example on ...

javascriptphphtmlajax

Tips for adding one document to two separate collections using JavaScript and MongoJS

Having trouble inserting data into two separate tables using javascript and mongojs. While I was able to successfully insert into a single collection by following the npm mongojs documentation, I couldn't find a solution for multiple collections on th ...

javascriptmongodbmongojs

Communication between components through a shared service

Imagine you find yourself in one component and need to trigger a method from another component. There are multiple ways to achieve this, which are explained in more detail on this page. Here, I will demonstrate the simplest possible example of how to make ...

angular

Mapping JSON arrays to Angular models using the map operator

I am facing the challenge of mapping JSON array objects from my server to an angular model. I believe that the ideal time to do this is as soon as I receive them in the pipeline at the map function. However, I am unsure about how to accomplish this using t ...

jsonangularrxjs

Exploring logfile usage in JavaScript. What is the best way to structure the log?

Currently, I am developing a Python program that parses a file and records the changes made to it. However, I am facing a dilemma regarding the format in which this information should be saved for easy usage with JavaScript on the local machine. My objecti ...

javascriptjsonparsing

Ways to retrieve the path of a button found within table cells

https://i.stack.imgur.com/pUYHZ.jpgI'm currently working on a table where I've created a button that's being used in various rows and tables based on certain conditions. There's a specific scenario where I need to display the button for ...

javascripthtml

Tips for maintaining consistency between server-side Java and client-side JS DTO properties

Greetings, I am in search of a solution or plugin within Eclipse that can ensure synchronization between server-side Java DTO properties and their corresponding client-side JSON elements as the codebase evolves. For instance, in a web application with a Ja ...

javajavascriptjsoneclipserest

What is the best way to display PHP files as the main landing page on my Express server?

I am currently using php for my home page, but I have come to realize that Node.js does not support .php files. So, I'm looking for a solution on how to address this issue. Below is the code I am using: var app = require('express')(); var h ...

javascriptphpnode.jsexpressindexing

The ng-repeat function is iterating through the array multiple times

Using ng-repeat to bind the same array multiple times. JavaScript : $scope.currentitem = item; $scope.currentitemCategory = $scope.currentitem.category.split(','); console.log($scope.currentitemCategory); HTML: <div ng-repea ...

javascriptangularjs

Showing recurring HTML elements with conditional content

I am displaying multiple bootstrap badges in a table column with different colors based on the values. Each badge has a unique class and style name to differentiate the colors. I feel like there is a lot of repetition in my HTML code. Is there a way for me ...

javascriptreactjsbootstrap-4

How come the font size and div elements combine when I drag and drop the items?

Recently, I decided to create my own drag and drop game. The game is almost complete, but there's one issue. When I try to drop the items into the designated "Drop Items Here" area, their style changes abruptly to mimic the text. For example: Additi ...

javascripthtmlcss

Angular error TS2322 arises when attempting to assign a type of 'Observable<{}>' with the share() operator

Currently diving into Angular 5, I've been exploring the Observable/Observer pattern to facilitate event sharing and data changes among subscribers. Below is a snippet of the code in question: ... @Injectable() export class NidoService { ... eve ...

javascriptangulartypescriptobservableobserver-pattern