Scope of variable in Javascript problem

Answer 1

You need to append your values within the callback function. Right now, your the line of code after the two $.getJSON calls is firing before the JSON is finished downloading. That's why the first append is working. You have a timing issue.

To illustrate the timing, use alert messages like this...

$.getJSON('http://twitter.com/followers/ids.json?screen_name='+ query1 + '&callback=?', function(data) {
    f1=data;
    alert('Two');
    $('#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;
    alert('Three');
});

alert('One');
$('#content').append('p'+f1[0]+'p');//this one is not coming...its showing Undefined

Answer 2

You never reference f2, so you may have a copy/paste bug. Did you mean to reference f1 again?

By the way, it's better to initialize the arrays like this

var f1=[];
var f2=[];
var common=[];

rather than using "new Array".

Also, as Josh pointed out, Ajax calls are asynchronous. You don't want to rely on the data coming in until it comes in.

BOTH of your $getJSON calls are going to come back immediately, so your program flow is not what you seem to expect.

jQuery's $getJSON takes a callback function as its third parameter. You want to set one up to do any processing after the call.

When you program with Ajax, you don't have one big piece of JavaScript, you have a bunch of event-driven pieces of code.

Answer 3

@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!