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

i want to get the value of it and put it as text at my page :) — Mathias Hermansen, Dec 16 '16 at 21:36
where in your code do you want to do it? you make two ajax calls so in which one do you want to divide the two? — IMTheNachoMan, Dec 16 '16 at 21:38
im not sure, i made two different ajax because its from two different links so i dont know whats best to do.. — Mathias Hermansen, Dec 16 '16 at 21:40
promises? i dont understand sorry.. @IMTheNachoMan did you have an answer? :) — Mathias Hermansen, Dec 16 '16 at 22:25

score 0 · Answer 1 · edited May 23 '17 at 11:53

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?

i tried that now but got this message: Cannot read property 'Skin: Flaming Skull Face Bandana' of undefined at main.js:41 — Mathias Hermansen, Dec 17 '16 at 01:19
@MathiasHermansen I bet it is because i was not parsing the response like your example code. Updated my answer, try now. — zlwaterfield, Dec 18 '16 at 00:45
Now i got this: Uncaught TypeError: Cannot read property 'price' of undefined at main.js:42 at XMLHttpRequest.xhr.onload (main.js:27) — Mathias Hermansen, Dec 18 '16 at 00:51
and i cant really see whats the problem, for me it look good.. sorry im bad at this, but thank you very much for helping me out! :) — Mathias Hermansen, Dec 18 '16 at 00:51
Since i am not sure what the response to the API looks like I am not 100% sure. You'll need to log the xhr response to see what it looks like. I have updated the code a little (the xhr response). Try that now and let me know. — zlwaterfield, Dec 19 '16 at 02:57

how can i access a variable thats inside a function

1 Answers1