passing javascript variables between functions

Question

I am a complete JS noob, so bear with me please.

I got a simple JS to query yahoo stock price, which is working great, however for some reason i cannot pass the result variable to another function, where i would like to perform some other calculations with it. I pasted the simplified version here.

If someone could help i would appreciate it, so i couldn't figure this out, all morning. :(

Thanks!

var result = "0";

function onBodyLoad(){

 getQuote();
 
 var balance = "100";
 var leverage = balance/result;
  
 $("#leverage_result").text(leverage);   
 
}

function getQuote(){

    var url = "http://query.yahooapis.com/v1/public/yql";
    var symbol = $("#symbol").val();
    symbol = "^GSPC";

    var data = encodeURIComponent("select * from yahoo.finance.quotes where symbol in ('" + symbol + "')");
 
    $.getJSON(url, 'q=' + data + "&format=json&diagnostics=true&env=http://datatables.org/alltables.env")
        .done(function (data) {   
        result = parseInt(data.query.results.quote.LastTradePriceOnly);
    });
   
}

<body onload="onBodyLoad()">
<div id='leverage_result'>No Price</div>
</body>

well, it should, however there is a mess-up around how i am storing the result variable in the second function, outside that getJSON call it cannot be displayed. — alfa8884, May 07 '16 at 12:02

score 0 · Accepted Answer · answered May 07 '16 at 11:54

You're banging your head against a wall here because you're treating asynchronous code as if it were synchronous. When you do $.getJSON the code does not stop to wait for the result to arrive, it continues. Therefore, in your onBodyLoad function, the lines after getQuote are executed immediately and not after the result arrives from the request you issue inside the getQuote function.

What you want to do is run your code after you get your results back from the server, and therefore you could use a callback:

function onBodyLoad(){

     getQuote(function(result) {
         var balance = "100";
         var leverage = balance/result;

         $("#leverage_result").text(leverage);            
     });

}

function getQuote(callback){

    var url = "http://query.yahooapis.com/v1/public/yql";
    var symbol = $("#symbol").val();
    symbol = "^GSPC";

    var data = encodeURIComponent("select * from yahoo.finance.quotes where symbol in ('" + symbol + "')");

    $.getJSON(url, 'q=' + data + "&format=json&diagnostics=true&env=http://datatables.org/alltables.env")
    .done(function (data) {   
        result = parseInt(data.query.results.quote.LastTradePriceOnly);

        callback(result);
    });

}

What's happening is that I'm creating an anonymous function that receives a result as its only parameter, and uses it do the operations you need to after you receive your data from the remote server. This function is passed to your getQuote function and called only after the $.getJSON has completed. A more elegant solution would be to use promises, but this should get you going.

Oh, and avoid global variables. 99.9% of the time they can be avoided because a solution exists where they are not required.

Thanks, what you are saying makes sense, i was sure my code is not optimal, JS is far from my strongsuit. :) for some reason the result variable still doesnt reach the second function: http://jsfiddle.net/RU8Jq/807/ Any idea what i am messing up? :/ — alfa8884, May 07 '16 at 12:04
I am crying, thank you very much, i wish i could treat you to a beer or something, nevertheless i upvoted your comment!thank you very much once again!!!! :) — alfa8884, May 07 '16 at 12:12

passing javascript variables between functions

1 Answers1