Accessing the 'comment' property within the .then() function is not possible if it is undefined

Question

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Why does obj[i] become undefined inside the .then() function?

obj = [{'id': 1, 'name': 'john', 'age': '22', 'group': 'grA'}, {'id': 2, 'name': 'mike', 'age': '24', 'group': 'grA'}, {'id': 3, 'name': 'anne', 'age': '25', 'group': 'grB'}]

for (var i = 0; i < obj.length; i++) {
    console.log(obj[i]) // has the correct value
    this.commentService.getAllComments(obj[i].id).then((res) => {
        ...
        console.log(obj[i]) // ends up being undefined ???
    })
}

Any solutions to prevent obj[i] from becoming undefined within the .then() block? Can you explain why this happens? Appreciate your insights!

UPDATE: The issue was using var instead of let. Thank you for pointing that out!

javascript angular typescript angular6

Answer 1

Answer №1

Utilizing var will declare a variable on the enclosing function level. Since the code within the promise then callback runs after the for loop has completed, you will always encounter i === obj.length. To prevent this issue, consider using block scope local variables with the let keyword.

for (let i = 0; i < obj.length; i++) { // use let instead of var
    console.log(obj[i]) // displays correct value
    this.commentService.getAllComments(obj[i].id).then((res) => {
        ...
        console.log(obj[i]) // shows accurate value
    })
}

Answer 2

Utilizing var will declare a variable on the enclosing function level. Since the code within the promise then callback runs after the for loop has completed, you will always encounter i === obj.length. To prevent this issue, consider using block scope local variables with the let keyword.

for (let i = 0; i < obj.length; i++) { // use let instead of var
    console.log(obj[i]) // displays correct value
    this.commentService.getAllComments(obj[i].id).then((res) => {
        ...
        console.log(obj[i]) // shows accurate value
    })
}

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Answer №1

Similar questions

Tips for choosing multiple files with the Ctrl key in a list item element:

Finding all parent IDs from a given child ID within a nested JSON structure that contains children can be achieved by recursively

What could be causing the Firebase email verification to result in a 400 error?

The code snippet $(this).nextAll("#...").eq(0).text("***") isn't functioning as expected

Updating a field in Mongoose by referencing an item from another field that is an array

ReactJS Provider not passing props to Consumer resulting in undefined value upon access

Insufficient allocation - memory overflow in loopback.js

Ways to convert a JavaScript object's properties into JSON format

How can I prevent buttons from being created using ngFor in Angular?

Transform them into async/await in JavaScript

The formatting in vscode does not apply to .tsx files

Another return payload failing to retrieve the return value

What methods are most effective for verifying user credentials in a web application using Node.js and AngularJS?

Guide on hosting two html pages on a NodeJS server

Incorporate a Web Worker into your webpack library for enhanced performance

Creating a custom HTML5 canvas with images from a JSON array

Leveraging deferred for linking loops involving several ajax requests

Restarting a JavaScript function upon switching views in Vue.js

Leverage Typescript to convert string literal types to uppercase

Utilizing Loops in a React Component's Function