arrays - Scope of variable in Javascript problem

Question

var query1 = urlencode($('input[name="searchTerm1"]').val()); //user1
var query2 = urlencode($('input[name="searchTerm2"]').val()); //user1
var rpp = 20; //number of tweets to retrieve out
var c=0;
var f1=new Array();
var f2=new Array();
var common=new Array();
$.getJSON('http://twitter.com/followers/ids.json?screen_name='+ query1 + '&callback=?', 
        function(data) {
                                 f1=data;

            $('#content').append('p'+f1[0]+'p');//this one is coming
            });
$.getJSON('http://twitter.com/followers/ids.json?screen_name='+ query2 + '&callback=?', 
        function(data1) {
                                  f2=data1;
                });
$('#content').append('p'+f1[0]+'p');//this one is not coming...its showing Undefined
})

In this code if u see clearly i have identified using // two append statements

one of them is working and outputting the number in the array

but the other one is outputting Undefined

i have defined the arrays so it should take the values but wat actually happens is that the array become inaccessible outside the $.getJSON function.

Any help will be appreciated.

Thank You

Answer 1

@anand, $.getJSON() retrieves JSON data in an asynchronous manner. The purpose of you callback functions is to perform work once the JSON has been received from the asynchronous request. I'll simplify your example some:

var query1 = urlencode($('input[name="searchTerm1"]').val()); //user1
var query2 = urlencode($('input[name="searchTerm2"]').val()); //user1
var rpp = 20; //number of tweets to retrieve out
var c=0;
var f1=new Array();
var f2=new Array();
var common=new Array();

$.getJSON('http://twitter.com/followers/ids.json?screen_name='+ query1 + '&callback=?', 
    // 1st callback
    function(data) {
        f1=data;

        // We know that f1 has been assigned, so unless the Twitter API
        // returns an empty Array, f1[0] will not be Undefined.
        $('#content').append('p'+f1[0]+'p');//this one is coming
});
$.getJSON('http://twitter.com/followers/ids.json?screen_name='+ query2 + '&callback=?', 
    // 2nd callback
    function(data1) {
        f2=data1;
});

// This statement may be executed before 1st callback and therefore
// f1 may still be an empty Array causing f1[0] to return Undefined.
$('#content').append('p'+f1[0]+'p');//this one is not coming...its showing Undefined

Please check out the comments regarding your calls to append(). Hope this helps!