Javascript variable not working outside function

Question

Possible Duplicate:
How to return AJAX response Text?

I'm trying to get the following code to work. I know there's something I'm not doing right in the variable scope within the function, but I can't figure out what (I'm mainly a designer, I'm quite happy I finally managed to understand a bit what JSON is about). Could anyone nudge me into the right direction? Thanks :)

var list = new Array();

//Twitter
function twitter(photos){
    $.each(photos.results, function(index, photo){
        if (photo.entities.media){
            list.push(photo.entities.media[0].media_url);
            console.log(list); // working here, returns array
        }
    });     
}
var url = "https://search.twitter.com/search.json?callback=?&q=%23pikachu&include_entities=true&count=50";
$.getJSON(url, twitter);

console.log(list); //not working here, returns []

http://stackoverflow.com/questions/4200641/how-to-return-a-value-from-a-function-that-calls-getjson — Jonathan de M., Dec 23 '12 at 10:18
thank you @Quentin, I've been reading up so much, but I didn't figure it was a JSON-related issue. — AKG, Dec 23 '12 at 10:20

Iftah · Accepted Answer · 2012-12-23T10:23:51.610

7

the problem is with the order things run:

request JSON from twitter
print list (empty)
JSON response - list gets filled.

You can verify by adding a timestamp to the logs (ie. console.log(new Date() + ' '+list)).

Simplest way to fix the problem is by calling the follow-up logic at the end of the callback and not below the getJSON line.

edited Dec 23 '12 at 10:23

answered Dec 23 '12 at 10:17

Iftah

9,512
2
33
45

Yep. getJSON initiates a request and will fire twitter when the server gets back to it with the photos object. JavaScript doesn't care what the server does until it actually brings something back to javaScript so it keeps firing stuff, including that console.log – Erik Reppen Dec 23 '12 at 10:20
@lftah reading up jquery.ajax documentation, JSONP does not support synchronous operation... – AKG Dec 23 '12 at 10:26
Right, don't write it to be synchronous. Instead put the "afterwards" code into the callback function – Gareth Dec 23 '12 at 10:35
@gareth, you would mind elaborating with a code sample? This (ajax) is all new territory for me – AKG Dec 23 '12 at 10:42
You are right, I removed the synchronous comment a few seconds after adding it. – Iftah Dec 23 '12 at 10:56
You're making a server request without reloading the browser. The server has to get back to you before the function 'twitter' fires. By the time that happens, the second console has already fired so there was nothing in the array yet. If that doesn't make it clear, it's time to do some googling. – Erik Reppen Dec 23 '12 at 10:56
1

@AKG - just do what you would do with the list at the end of the "twitter" function (eg. add elements to the DOM) when the $.each loop is complete and the list is full. – Iftah Dec 23 '12 at 10:58

score 1 · Answer 2 · answered Dec 23 '12 at 13:08

The Parameter "twitter" in your code means not the function "twitter", but a variable named "twitter":

$.getJSON(url, twitter);

Your code should look like follows:

...
var twitter = (function(photos){
    $.each(photos.results, function(index, photo){
        if (photo.entities.media){
            list.push(photo.entities.media[0].media_url);
            console.log(list); // working here, returns array
        }
    });     
});
var url = "https://search.twitter.com/search.json?callback=?&q=%23pikachu&include_entities=true&count=50";
$.getJSON(url, twitter);
...

Javascript variable not working outside function

2 Answers2