$.getJSON not working

Question

I search related topic in jQuery. But I didn't saw 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 four problems here:

1. Why 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.
4. The variables in "$.each(data, function(entryIndex, entry){" statement, the function have two input parameters one is entryIndex and other is entry, I am so wonder these two parameter is for what? and how can I use these two paramenters.

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).

Answer 2

Just add to link

&callback=?

or

?callback=?

(if it's first and only GET variable) This will make your call into JSONP call, which doesn't have problems with Same Origin Policy.

Answer 3

Not sure but doesn't it require get arguments? Try this:

$.getJSON(weblink, {}, function(data){

Answer 4

Are you using MVC platform? Apparently, by default MVC 2.0 blocks GET requests to actions that return a JsonResult. Check out:

http://mhinze.com/2010/04/13/json-hijacking-in-asp-net-mvc-2/

I had the same problem whilst upgrading an existing application (written in MVC v1) that used .getJSON calls to pull data from MVC Controller to View (via jquery/javascript) & could not figure out why they did not work I tried different versions of jquery with no luck, then I found the above link. I changed to POST instead (and also changed slightly how the data was sent from the Controller - used Dictionary ) and got it working - finally!!

Good luck! JayD

Answer 5

I would like to add another reason why jQuery.getJSON() might not response as expected in a developing environment under IIS for Windows.

Following all the procedures provided here, I was not able to get any data from a *.json file, only if I changed the extension to *.js, the response status returned

{"status"="404", "statusText"="Not Found"}

Then I remembered that with IIS there are some MIME/Types that are not specified. Adding MIME/Type application/json for files with extension .json solved my problem.

For information how to add MIME/types on iis7.