CODEWITHSUNDEEP
javascriptfunction
Jghorton14
Jghorton14

Reputation: 754

Accessing variable outside of scope (javascript)

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

Upvotes: 1

Views: 1313

Answers (3)

abhi3232
abhi3232

Reputation: 391

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

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

Upvotes: 0

monners
monners

Reputation: 5302

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

Upvotes: 3

Alex Gelinas
Alex Gelinas

Reputation: 147

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 =)

Upvotes: 1

Related Questions