Javascript variable inheritance issue

Question

I am having an issue with some code which I would expect to work. I have a variable defined outside a function and as such would expect that to be available to the function through inheritance. I console log the variable outside the function and get a value and console log inside the function and get undefined. I have used comments in the code to show these console logs. Any help here would be great. Please see code snippet below. Thanks Ant

for (var i = 0; i < parseResult.length; i++) {

    var destination = parseResult[i].attributes.userInfo;

    for (var i = 0; i < firebaseResult.length; i++) {

        if (firebaseResult[i].$id == parseResult[i].attributes.facebookID) {


            parseResult[i].attributes.convoID = firebaseResult[i].convoID;

            console.log(firebaseResult[i].time); // this returns the timestamp value

            parseResult[i].attributes.lastMessage = FirebaseAPI.getLastMessage(firebaseResult[i]).$loaded()
                .then(function(lastMessage) {

                    console.log(firebaseResult[i].time); // this returns undefined

                    if (!(0 in lastMessage)) {

                        var returnValue = 'Matched on ' + firebaseResult[i].time;
                    } else if (0 in lastMessage) {

                        var returnValue = lastMessage[0].message;
                    }

                    return returnValue;

                })
                .catch(function(error) {
                    console.log("Error:", error);
                })

        }
    }
}

You're using i for both of the for loops, that is causing conflict. Use i and j for loops — Tushar
– Tushar, Commented Jun 30, 2015 at 8:48
@Tushar: that, and (even if he used different counters) both of them will likely be pointing to out-of-range of their respective arrays when a callback finally arrives. — Sergio Tulentsev
– Sergio Tulentsev, Commented Jun 30, 2015 at 8:51
duplicate of JavaScript closure inside loops – simple practical example — JJJ
– JJJ, Commented Jun 30, 2015 at 8:52
@SergioTulentsev Yes, for asynchronous operations inside for, anonymous function should be used inside for to preserve correct value of i or j — Tushar
– Tushar, Commented Jun 30, 2015 at 8:52
@Tushar: Better yet, a named function describing its purpose and being reused. — T.J. Crowder
– T.J. Crowder, Commented Jun 30, 2015 at 9:28

Icycool · Accepted Answer · 2015-06-30 08:55:49Z

2

It is often not reliable to use loop iterator to access things in async callback, because when the callback come back, i would have been increased to the value that let it exit the loop.

The fix is assigning it to a variable for anything you want to hold.

console.log(firebaseResult[i].time); // this returns the timestamp value
var time = firebaseResult[i].time;

parseResult[i].attributes.lastMessage = FirebaseAPI.getLastMessage(firebaseResult[i]).$loaded()
   .then(function(lastMessage) {

       console.log(firebaseResult[i].time); // this returns undefined
       console.log(time);

answered Jun 30, 2015 at 8:55

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hugohil · Accepted Answer · 2015-06-30 08:58:26Z

1

It's because you're in the callback of your FirebaseAPI.getLastMessage() call. If you log this (your scope) in it, you'll get something like a FirebaseAPI object or something.

What you can do is the classic var self = this; trick to keep your context stored in a variable accessible through scopes.

This would look like:

for (var i = 0; i < parseResult.length; i++) {

var destination = parseResult[i].attributes.userInfo;

for (var i = 0; i < firebaseResult.length; i++) {

    if (firebaseResult[i].$id == parseResult[i].attributes.facebookID) {


        parseResult[i].attributes.convoID = firebaseResult[i].convoID;

        console.log(firebaseResult[i].time); // this returns the timestamp value
        // Store your context here
        var self = this;
        this.results = firebaseResult[i].time;

        parseResult[i].attributes.lastMessage = FirebaseAPI.getLastMessage(firebaseResult[i]).$loaded()
            .then(function(lastMessage) {

                console.log(firebaseResult[i].time); // this returns undefined
                // Get your values
                console.log(this.results); // this returns your values.

                if (!(0 in lastMessage)) {

                    var returnValue = 'Matched on ' + firebaseResult[i].time;
                } else if (0 in lastMessage) {

                    var returnValue = lastMessage[0].message;
                }

                return returnValue;

            })
            .catch(function(error) {
                console.log("Error:", error);
            })

    }
}

}

I see in your tags that you're using Angularjs, so you could use the $scope object to store your scope variable and easily deal with promises and such.

Hope this helps :)

answered Jun 30, 2015 at 8:58

hugohil

4310 bronze badges

2 Comments

Ant Over a year ago

Thanks very much that's great, I accepted the first answer that worked. This answer explains how to use this and was very informative. Thank you for taking the time :)

hugohil Over a year ago

No problem :) First answer was indeed also taking in consideration the fact that you are in a loop.

Collectives™ on Stack Overflow

Javascript variable inheritance issue

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related