1

I'm trying to create a javascript variable my_jason from the contents of a JSON file "gunsList.json" (both are stored within the same folder on my machine).

I seem to be having the same issue that the OP had in this post, which was resolved when he corrected his flawed JSON file. Thinking I have the same issue, I ran my file through JSONLint (I'm assuming that's proper validation), and it came back clean.

Borrowing tips from this post, I tried using jQuery to get it done (note: I'm using jQuery successfully in other parts of the existing code), as follows:

var my_json;
$.getJSON('gunList.json', function(json) {
my_json = json;
});

When I try the method above (e.g., alert(my_json)), my_json is undefined.

Admittedly, I know very little about AJAX, but I also tried:

var my_json = (function () {
    var my_json = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'gunsList.json',
        'dataType': "json",
        'success': function (data) {
            my_json = data;
        }
    });
    return my_json;
})();

In the case above, my_json is null.

All my code that references the array within "gunsList.json" when I paste it in as a variable in my js file runs fine, but as a fledgling programmer, I'd be really excited about getting it to work with JSON.

Community
  • 1
  • 1
Remo Williams
  • 235
  • 6
  • 17
  • 1
    1) Where and when are you doing the `alert`? Try it in the callback itself. 2) Provide an error handler for your `$.ajax` call and see if it's getting called. – Matt Burland May 23 '13 at 02:44
  • is there an error in the browser console? one reason could be the ajax request is failed and error callback is called – Arun P Johny May 23 '13 at 02:45
  • It looks fine to me otherwise http://plnkr.co/edit/O1GB5untrFh82KtaUJuk?p=preview – Arun P Johny May 23 '13 at 02:48

1 Answers1

5

Here's why your original $.getJSON() code didn't work - the comments show the order of execution and the value of my_json at each step:

var my_json;
// 1 - my_json is undefined
$.getJSON('gunList.json', function(json) {
    // 3 (!)
    my_json = json;
    // 4 - my_json now has the JSON data
});
// 2 - my_json is undefined (!)

As you can see, the function returns before the my_json value is set.

So you tried to fix it by using the async: false option on a $.ajax() call instead. But that is a very bad idea! Never use that option unless you have a very good reason for it: in many browsers, it will hang up not just your own site but all browser tabs and windows until your server returns the data.

Instead, let the $.ajax() or $.getJSON() call operate asynchronously, and do something with the data in the callback or in a function that you call from that callback. So, going back to your original $.getJSON() code, you can do this:

$.getJSON( 'gunList.json', function( json ) {
    // Do stuff with JSON data here, or call a function here and
    // pass the data to it as an argument
});
Michael Geary
  • 28,450
  • 9
  • 65
  • 75