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.

Welcome to the wonderful world of async! You can't do that. — SLaks
– SLaks, Commented Jun 13, 2012 at 22:58
and where that return is supposed to pass the data to? — zerkms
– zerkms, Commented Jun 13, 2012 at 23:05

zerkms · Accepted Answer · 2012-06-13 23:06:25Z

2

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);
});

answered Jun 13, 2012 at 23:06

zerkms

256k73 gold badges447 silver badges551 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Chris Abrams Over a year ago

+1 on making the call a function, and then using deferred on it so that the function can be used without nesting callbacks.

zerkms Over a year ago

@Chris Abrams: yeah, pass-the-callback epoch has ended when $.Deferred was introduced :-)

Chris Abrams Over a year ago

Unless you work with a library that doesn't support promises (at work I do). Much callback nesting occurs :(

zerkms Over a year ago

Btw, if anyone is interested about how-to-use promises - I highly recommend this article: joseoncode.com/2011/09/26/…

Gus Fune Over a year ago

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?

|

sottenad · Accepted Answer · 2012-06-13 23:04:02Z

0

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.

answered Jun 13, 2012 at 23:04

sottenad

2,6462 gold badges17 silver badges18 bronze badges

3 Comments

Chris Abrams Over a year ago

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 Over a year ago

When I try to access my variable later, it shows as 'undefined', so it quite doesn't work at all :/

sottenad Over a year ago

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.

Collectives™ on Stack Overflow

JQuery return variable from JSON request

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related