how can i access a variable thats inside a function

Question

Okey, i have gotten some data from 2 different JSON files, and i want to take one of them and divide with the other, how can i do that? I want to divide the 'sugString' with the 'htmlString'. And after i have done that i want to insert it into a different id like i have done with each of them already.

var flamingSkull = document.getElementById("flaming-skull");
var flamingSkullq = document.getElementById("flaming-skullq");
var flamingSkullSug = document.getElementById("flaming-skullsug");

  var ourRequest = new XMLHttpRequest();
    ourRequest.open('GET', 'https://api.opskins.com/IPricing/GetAllLowestListPrices/v1/?appid=433850');
    ourRequest.onload = function() {
      var ourData = JSON.parse(ourRequest.responseText);
      renderFlamingSkull(ourData);
};

   ourRequest.send();


var ourRequest2 = new XMLHttpRequest();
  ourRequest2.open('GET', 'https://api.opskins.com/IPricing/GetPriceList/v1/?appid=433850');
  ourRequest2.onload = function() {
     var ourData2 = JSON.parse(ourRequest2.responseText);
     renderFlamingSkullSug(ourData2);
};

   ourRequest2.send();



function renderFlamingSkullSug(data) {

   var sugString = data.response[ 'Skin: Flaming Skull Face Bandana' ][today].price / 100;

   flamingSkullSug.insertAdjacentHTML('beforeend', "$" + sugString);
}

function renderFlamingSkull(data) {

   var htmlString = data.response[ 'Skin: Flaming Skull Face Bandana' ].price / 100;
   var quantityString = data.response[ 'Skin: Flaming Skull Face Bandana' ].quantity;


   flamingSkull.insertAdjacentHTML('afterbegin', "$" + htmlString);
   flamingSkullq.insertAdjacentHTML('beforeend', "<p>(" + quantityString + ")</p>");
}

Answer 1

One solution is to create a request function and use a callback on it. So you can chain the two requests together and have access to both responses.

 var flamingSkull = document.getElementById("flaming-skull"); var flamingSkullq = document.getElementById("flaming-skullq"); var flamingSkullSug = document.getElementById("flaming-skullsug"); var lowestPriceUrl = 'https://api.opskins.com/IPricing/GetAllLowestListPrices/v1/?appid=433850'; var priceListUrl = 'https://api.opskins.com/IPricing/GetPriceList/v1/?appid=433850'; function makeRequest (method, url, done) { var xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.onload = function () { done(null, JSON.parse(xhr.responseText)); }; xhr.onerror = function () { done(JSON.parse(xhr.responseText)); }; xhr.send(); } makeRequest('GET', lowestPriceUrl, function (err, res) { if (err) { throw err; } makeRequest('GET', priceListUrl, function (err, res2) { if (err) { throw err; } var sugString = res[ 'Skin: Flaming Skull Face Bandana' ][today].price / 100; var htmlString = res2[ 'Skin: Flaming Skull Face Bandana' ].price / 100; var quantityString = res2[ 'Skin: Flaming Skull Face Bandana' ].quantity; flamingSkullSug.insertAdjacentHTML('beforeend', "$" + sugString); flamingSkull.insertAdjacentHTML('afterbegin', "$" + htmlString); flamingSkullq.insertAdjacentHTML('beforeend', "<p>(" + quantityString + ")</p>"); // Complete division // ================== // var division = Math.round(sugString/htmlString) }); }); 

Using another question as reference: How do I promisify native XHR?