Getting output from url with javascript

Question

My previous questions related to this Read single data in csv data downloaded from url

Code that I refer from here https://gist.github.com/henrik/265014

Sorry if I ask again, but the last answer I got didn't work as it should be in Windows Gadget environment.

I try to use this code in order to get csv data into my variable but all I get is NaN all over.

    function getRate(from, to) {
        var script = document.createElement('script');
        script.setAttribute('src', "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+from+to+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&callback=parseExchangeRate");
        document.body.appendChild(script);

      }

    function parseExchangeRate(data) {
        //var name = data.query.results.row.name;
        var rate = parseFloat(data.query.results.row.rate, 10);
        console.log("Exchange rate is " + rate);
        console.log(rate);
      }

 getRate("EUR", "USD");

From the url in getRate function, here's the output

{"query":{"count":1,"created":"2015-05-06T04:21:02Z","lang":"en-US","results":{"row":{"rate":"1.1226","name":"EUR/USD"}}}}

I did get the value I want to parseExchangeRate function which is rate but I couldn't parse the value to other variable (abc in this case).

 var abc = getRate("EUR", "USD");
 console.log(abc);

What I'm supposed to do in order to get the value to the variable? Thanks in advance.

This works as expected for me, I don't see any issues. My output is `Exchange rate is 1.1232`, and `getRate` returns `1.1232`. — James Wilkins, May 06 '15 at 04:54
it gets output just fine from the parseExchangeData function but I couldn't get the value out to other variable. I want to pass the value to 'abc' variable but all i get was undefined in console. — flagstar, May 06 '15 at 05:44
I can only confirm that it works in a browser console. Your problem must be specific to the gadget system I guess. — James Wilkins, May 06 '15 at 13:59
@James console.log doesn't work in gadget so I'm testing this on browser to see if there is any output. In the console, abc variable shows `undefined` and the value from _parseExchangeRate_ function comes after that with the value I want to pass. — flagstar, May 07 '15 at 02:18
@JamesWilkins tried both Firefox and Chrome. `abc` still result in `undefined` on both browsers follows by the valid output from the callback. I try to create button in html instead and `abc` get the value I want on second click. — flagstar, May 08 '15 at 03:40
Sorry, I saw a value outputting to the console correctly and assumed it was working because you only had `getRate("EUR", "USD");` in your first code. You were asking about the value returned to `abc`, my bad. That will not work as you are thinking. — James Wilkins, May 08 '15 at 04:07

James Wilkins · Accepted Answer · 2015-05-08T19:11:56.140

You problem is that you are adding the script dynamically to the page. The function returns right away (hence undefined) before the script can load and run, so it will not work. The script loads asynchronously, not inline like when a page is parsed by the browser.

Anyhow, this will work:

function getRate(from, to, completed) {
    var script = document.createElement('script');
    script.setAttribute('src', "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3D"+from+to+"%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&callback=parseExchangeRate");
    script.onload = completed;
    document.body.appendChild(script);
}

var currentRate = 0;

function parseExchangeRate(data) {
    //var name = data.query.results.row.name;
    currentRate = parseFloat(data.query.results.row.rate, 10);
    console.log("Exchange rate is " + currentRate);
}

getRate("EUR", "USD", function(){ console.log("The rate is " +currentRate); });

On a side note, loading scripts dynamically can be a good thing to use to help speed up page loading by allowing some resources to load in parallel to prevent blocking the page. As well, dynamically loading scripts means you only load the scripts you want to. The caveat is you have to wait for it to load first before doing anything. ;)

ah I get it now. No wonder I can't get this to work in single run. Is there an alternative method (static) rather than using dynamic script? — flagstar, May 08 '15 at 04:27
You can use XMLHttpRequest to create a synchronous (blocking) call, but unless you are saving data (and even then), that's a bad design (and is deprecated starting with Gecko 30.0). You can find more details here: https://goo.gl/MKi8wg All that aside, if you did make a blocking call, and there were network issues, the page would lock up, unless you have a timeout. Async is better. — James Wilkins, May 08 '15 at 15:11
thanks a lot for the reference link on async XMLHttpRequest. It works much better than the dynamic script I applied earlier. — flagstar, May 11 '15 at 01:50

Getting output from url with javascript

1 Answers1