variable returns undefined when attempting to read a file using ajax

Question

Hello i am getting undefined when reading a json file using ajax file. It returns undefined:

var input;
$.getJSON('cake.json', function(data) {
        input = data;
    });
console.log('Result'+input);

but the variable input returns undefined.

cake.son is typing mistake or actually mistake. try .json if mistake — Paresh Gami, May 08 '16 at 05:11
You might need to put the "console.log()" inside the function after "input = data;". Depending on how this particular piece of js is loaded, the "console.log()" might be evaluated before the function. — Ola Næss Kaldestad, May 08 '16 at 05:19
@PareshGami yes file it saved correctly. saved on the server. working with mamp — Jennifer Fitzgerald, May 08 '16 at 05:21
`$.getJSON` is asynchronous, `console.log()` is run before `$.getJSON` complete execution. — Sergey Gornostaev, May 08 '16 at 05:21
@SergeyGornostaev so console.log gets called before it retrieves the contents of the file? — Jennifer Fitzgerald, May 08 '16 at 05:23
The accepted answer at the duplicate I linked to gives a very good explanation of what's happening here. — nnnnnn, May 08 '16 at 05:32
@ALSDMinecraft yes i can see the results when i placed console.log inside the function — Jennifer Fitzgerald, May 08 '16 at 05:44
@SergeyGornostaev yes i can see the results when i placed console.log inside the function — Jennifer Fitzgerald, May 08 '16 at 05:45
Also have a look at [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/q/23667086/218196) — Felix Kling, May 08 '16 at 05:52
@FelixKling so i have to write a callback function to prevent the variable from being undefined? — Jennifer Fitzgerald, May 08 '16 at 07:07
Well, you already have a callback function. Ajax is all about timing. Code that needs to access the response needs to be inside or called from the callback function. — Felix Kling, May 08 '16 at 14:57

score 0 · Answer 1 · edited May 23 '17 at 12:07

You have this:

var input = [];

$.getJSON('cake.json', function(data) {
    input = data;
});

// This will likely execute BEFORE getJSON has returned 'data'
console.log('Result' + input);

But try this and, assuming you're actually getting data, you should see results in the console.

var input = [];

$.getJSON('cake.json', function(data) {
    input = data;
    console.log('Result' + input);
});

(Another way to debug to make sure your JSON call is working is to use the network debugger.)

If you don't need input to be in the global scope (see here about scope of variables in JavaScript), you can just do this:

$.getJSON('cake.json', function(data) {
    // do something with the 'data'
});

or:

$.getJSON('cake.json', function(data) {
    process(data);
});

function process(data) {
    // do something with data
}

variable returns undefined when attempting to read a file using ajax

1 Answers1