Accessing variable outside of scope (javascript)

Question

I am trying to access a variable outside of the scope of the function. I am trying to access price outside of the function. Do I have to wait until the request finishes, or do I not have access to the price?

        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', "https://api.iextrading.com/1.0/stock/aapl/quote", true);
        httpRequest.send();
        httpRequest.addEventListener("readystatechange", processRequest, false);

        function processRequest(e) {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                response = JSON.parse(httpRequest.responseText);
                console.log(response.latestPrice);
                var lastPrice = response.latestPrice;
                document.getElementById("StockPrice").innerHTML = lastPrice;
                price = lastPrice;
            }
        }
        document.write("outside: " + price);

monners · Accepted Answer · 2017-09-12 03:11:41Z

You don't have access to the price variable outside of that function's scope. What you can do instead is return price, then assign a call to that function to a variable. For example:

var price = processRequest();

However, that call will be asynchronous, so you'll either have to make the document.write call from within that function, or you'll have to setup some kind of promise or callback to ensure that document.write is only called once the request is complete (and price is actually assigned a value).

That might look something like:

function writeToDoc (price) {
  document.write("outside: " + price);
}

function processRequest(e, cb) {
  // request logic
  if (httpRequest.readyState == 4 && httpRequest.status == 200) {
    response = JSON.parse(httpRequest.responseText);
    console.log(response.latestPrice);
    var lastPrice = response.latestPrice;
    document.getElementById("StockPrice").innerHTML = lastPrice;
    price = lastPrice;
    // Call callback function
    cb(price);
  }
}

httpRequest.addEventListener("readystatechange", processRequest.bind(this, writeToDoc), false);

Alex Gelinas · Accepted Answer · 2017-09-12 03:09:41Z

1

Alongside var httpRequest... try setting var price = null

As far as your JS document knows, "price" as a variable doesn't exist outside of the scope of processRequest().

Using "use strict" at the top of your document will make scoping issues like this easier to see =)

answered Sep 12, 2017 at 3:09

Alex Gelinas

1471 gold badge1 silver badge10 bronze badges

Comments

abhi3232 · Accepted Answer · 2017-09-12 03:26:10Z

0

First thing first if you want to access any variable outside of it's scope in JS then use closures. I am not seeing where price is declared, if it is global then it is fine in your case.

There are two types of request synchronous & asynchronous (more here) and one should always prefer asynchronous requests to have great performance. In your case price is dependent on the response of request you should wait till response comes. You may do it by two ways

Add processing icon on UI till you got response (for async request)
Use synchronous request

answered Sep 12, 2017 at 3:26

abhi3232

3912 gold badges5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Accessing variable outside of scope (javascript)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related