jQuery getJSON call not returning desired arguments?

Question

I searched for a related topic in jQuery, but I didn't see any method to solve my problem.

$(document).ready(function(){
    $("#inputForm").submit(function(event){
        $(":text").each(function() {
            var inputText = $(this).val();
            var userList = [];
            var weblink = 'http://test.com';

            // problem is from here.
            $.getJSON(weblink, function(data){
                alert(weblink); // this statement doesn't show up
                $.each(data, function(entryIndex, entry){
                    userList.push(entry['from_user']);
                });
            });
            alert(userList);
        });
     });
});

There are 3 problems here:

1. Why doesn't the first alert('weblink') doesn't show up?
2. Why this code can't get the json data from website?
3. The goal of this code is to get the from_user tag from json file and store into userList array.

The variables in "$.each(data, function(entryIndex, entry){" statement, the function have two input parameters one is entryIndex and other is entry. I am wondering what these parameters are for and how to use them?.

Can anyone help me solve this problem. I have been stock in here for one day. Thank you very much.

Answer 1

A couple of issues there:

1. getJSON does an ajax request. Ajax requests are subject to the Same Origin Policy. Unless your page is loaded from http://test.com (or a couple of other caveats), it won't work. You're probably looking for JSON-P (which jQuery also supports), provided the server supports it.

2. getJSON, like all ajax requests, is asynchronous by default, so your second alert (with the user list) will happen before the request completes. Although you can make ajax requests synchronous, it's a very bad idea (locks up the UI of most browsers during the request). Instead, just use the user list after you've received it in the callback, rather than trying to use it in the function calling getJSON.

Edit: You've said below that you're trying to use the Twitter search API. That API does support JSON-P, so if you use JSON-P to do your request, it should work. e.g.:

$(document).ready(function(){
    $("#inputForm").submit(function(event){
        $(":text").each(function() {
            var inputText = $(this).val();
            var userList = [];
            var weblink = 'http://search.twitter.com/search.json?q=&ands=google';

            // problem is from here.
            $.ajax({
                url:        weblink,
                dataType:   "jsonp", // <== JSON-P request
                success:    function(data){
                    alert(weblink); // this statement doesn't show up
                    $.each(data.result, function(entryIndex, entry){ // <=== Note, `data.results`, not just `data`
                        userList.push(entry['from_user']); // <=== Or `entry.from_user` would also work (although `entry['from_user']` is just fine)
                    });
                    alert(userList); // <== Note I've moved this (see #2 above)
                }
            });
        });
     });
});

...but surely you don't want to do that for each text field in the form?

Here's a live example but without a form (and only doing one request, not a request for each field).