Variable scope in anonymous function

Question

I'm trying to populate an array in JavaScript using an anonymous function in the jQuery getJSON() function as follows.

$(document).ready(function() {

    function Link(url, title) {
        this.url = url;
        this.title = title;
    }
    var links = [];

    $.getJSON("http://reddit.com/r/programming/.json?jsonp=?", function(data) {
        $.each(data.data.children, function(i, item) {
            var title = item.data.title;
            var url = item.data.url;

            links.push(new Link(url, title));
        })
    });

    for(var i=0; i< links.length; i++) {
        var output = "<a href='" + k + "'>" + links[k] + "</a>";
        $('<p>' + link + '</p>').appendTo('#content');
    }

});

But, when I hit the for loop, the links array shows up empty. What's going on here?

have you tried putting a break point inside the getJSON call back and the one inside the for? see which gets hit first? — jflood.net
– jflood.net, Commented Jun 5, 2012 at 3:33
Try moving the function declaration outside the document.ready — Brad Ruderman
– Brad Ruderman, Commented Jun 5, 2012 at 3:34

tibo · Accepted Answer · 2012-06-05 03:33:53Z

3

Try that :

    $(document).ready(function() {

        function Link(url, title) {
            this.url = url;
            this.title = title;
        }

        $.getJSON("http://reddit.com/r/programming/.json?jsonp=?", function(data) {
            var links = [];
            $.each(data.data.children, function(i, item) {
                var title = item.data.title;
                var url = item.data.url;

                links.push(new Link(url, title));
            })
            for(var i=0; i< links.length; i++) {
                var output = "<a href='" + k + "'>" + links[k] + "</a>";
                $('<p>' + link + '</p>').appendTo('#content');
            }
        });


    });

Your loop was probably executed before your callback ;)

answered Jun 5, 2012 at 3:33

tibo

5,5044 gold badges40 silver badges54 bronze badges

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

4 Comments

nnnnnn Over a year ago

"Probably" - With an async call the loop would definitely be executed before the callback.

tibo Over a year ago

It is an asynchronous call, so nothing is guaranteed in theory. But I agree, on the practice, it will be always executed after .

hodgesmr Over a year ago

Thank you for this. Is there a way to implement this such that execution blocks until all of the json data has been pulled? I'd like to be able to pull from many json sources and populate arrays of data (this was just my first example) and then do work on the various filled arrays.

nnnnnn Over a year ago

(Not to start an argument, but) I'm not aware of any browsers that run JS on more than one thread. This means any currently executing code will always complete before any async callbacks.

Sang Suantak · Accepted Answer · 2012-06-05 03:40:45Z

3

That's because $.getJSON is an asynchronous method. The code execution continues even after $.getJSON and reaches the for loop, by which time, your async request hasn't completed yet. You should move the loop within $.getJSON.

edited Jun 5, 2012 at 3:40

answered Jun 5, 2012 at 3:35

Sang Suantak

5,2652 gold badges30 silver badges46 bronze badges

Comments

jflood.net · Accepted Answer · 2012-06-05 03:39:32Z

1

This jsFiddle http://jsfiddle.net/cArYg/2/ shows the iteration occuring before the getJson callback

answered Jun 5, 2012 at 3:39

jflood.net

2,4662 gold badges21 silver badges20 bronze badges

Collectives™ on Stack Overflow

Variable scope in anonymous function

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related