Cannot access array element. use result of one ajax request to another ajax request

Question

    //global variables
var corpArray = new Array(); //store corp classes instances
var corpId = new Array(); //store corp id's

window.onload = init();

function init() {
  getNpcCorpId();
  console.log(corpId);
  getCorpNames(corpId[5]);
}

//get all corporation id's from the game
function getNpcCorpId() {
  let conName = new XMLHttpRequest();
  conName.onload = function() {
    if (this.status == 200) {
      let idList = JSON.parse(this.responseText);
      idList.forEach(element => {
        corpId.push(element);
      });
    }
  };
  conName.open(
    "get",
    "https://esi.evetech.net/latest/corporations/npccorps/?datasource=tranquility",
    true
  );
  conName.send();
}

//get corporation name
function getCorpNames(element) {
  console.log(element);
  let corpConn = new XMLHttpRequest();
  corpConn.onload = () => {
    if (this.status == 200) {
      console.log(this.responseText);
    }
  };
  corpConn.open(
    "get",
    `https://esi.evetech.net/latest/corporations/${element}/?datasource=tranquility`,
    true
  );
  corpConn.send();
}

I am trying to create an eve online api, i want to use 2 global varibles to store my retrieved values (because i do not know another way) i will use a couple of functions to use the provieded eve api.I can not acces my corpId individual elements, when i console log all my array ,everything is ok,but when i want to access individual element it appears undefiend.

Answer 1

 //global variables
var corpArray = new Array(); //store corp classes instances
var corpId = new Array(); //store corp id's

window.onload = init();

async function  init() {
  await getNpcCorpId();
  console.log(corpId);
  getCorpNames(corpId[5]);            // asynchronous behaviour - let it be fix using await and async
}

//get all corporation id's from the game
function getNpcCorpId() {
 return new Promise(function(resolve, reject) {
  let conName = new XMLHttpRequest();
  conName.onload = function() {
   if (this.status == 200) {
     let idList = JSON.parse(this.responseText);
     idList.forEach(element => {
    corpId.push(element);
     });
   }
   resolve();
  };
  conName.open(
    "get",
    "https://esi.evetech.net/latest/corporations/npccorps/?datasource=tranquility",
    true
  );
  conName.send();
 
});

  
}

//get corporation name
function getCorpNames(element) {
  console.log(element);
  let corpConn = new XMLHttpRequest();
  corpConn.onload = () => {
    if (this.status == 200) {
      console.log(this.responseText);
    }
  };
  corpConn.open(
    "get",
    `https://esi.evetech.net/latest/corporations/${element}/?datasource=tranquility`,
    true
  );
  corpConn.send();
}

This is due to asynchronous behaviour - in simple terms - when you call getNpcCorpId() it is a http request it will take some time to execute but next line run immediately so at that point of time corpId is still blank. So to fix this issue you can use await that will makes JavaScript wait until the promise returns a result.

Hope this helps you !