JQuery return variable from JSON request

Question

I have the following code to pull some data from an external source:

 $(document).ready(function(){
 $.getJSON('mydata.json',function(data) {
 var ned = data.names.ned;
 return(ned);
 });
 });

And In my JSON I have:

 {
 "names": {
 "ned": "Eddard Stark",
 "jon": "Jon Snow",
 "tyrion": "Tyrion Lannister"
 }
 } 

I want to know how can I use the variable 'ned' on another function. Also, I want further to set other variables like 'jon' and 'tyrion' to be able to use later, but I can't make them pass to another function.

The JSON callback must be done on page load to be able to proper use some of the app functions, that's why it's on document ready.

• SLaks: Welcome to the wonderful world of async! You can't do that.
• zerkms: and where that return is supposed to pass the data to?

Answer 1

You can do that easily using jquery $.Deferred:

function getNed()
{
 return $.getJSON('mydata.json').pipe(function(data) {
 var ned = data.names.ned;
 return ned;
 });
}
getNed().done(function(ned) {
 alert(ned);
});

• Chris Abrams: +1 on making the call a function, and then using deferred on it so that the function can be used without nesting callbacks.
• zerkms: @Chris Abrams: yeah, pass-the-callback epoch has ended when $.Deferred was introduced :-)
• Chris Abrams: Unless you work with a library that doesn't support promises (at work I do). Much callback nesting occurs :(
• zerkms: Btw, if anyone is interested about how-to-use promises - I highly recommend this article: joseoncode.com/2011/09/26/…
• Gus Fune: That did work pretty well. But what if I want to pass 2 variables on my first function? Is there anyway I could return each JSON entry as a variable?

Answer 2

A quick/easy way to do this would be to declare a global variable, then fill it with your data from the json call when you get it.

<script> 
var myJsonData; //Make this a very unique name, as you may conflict with other variables in plugins and such.
$(document).ready(function(){
 $.getJSON('mydata.json',function(data) {
 myJsonData = data;
 var ned = data.names.ned;
 return(ned);
 });
});
</script>

However, note that your getJSON call could take a long time, and you have to be diligent in checking that the myJsonData variable is not undefined before using it. Alternatively, you could call some sort of initialization function from the json callback.

• Chris Abrams: I cannot recall a single time in developing Javascript where I said "A quick/easy way to do this would be to declare a global variable" solved my issue. Edit: I understand how the global variable was used but you can't count on it having a value.
• Gus Fune: When I try to access my variable later, it shows as 'undefined', so it quite doesn't work at all :/
• sottenad: This is exactly what I mentioned below the code sample: 'you have to be diligent in checking that the myJsonData variable is not undefined before using it.' But I definitely learned from zerkms in the answer above.