undefined при попытки получить элемент массива по индексу

Имеется функция, в которой формируется массив объектов из переданного в неё массива. При передачи в log в самой функции всё выводится нормально. Переменная с массивом объявлена глобально. Консоль разработчика

    function getQuestion(){
        let request = new XMLHttpRequest();
        request.open('GET', 'js/question_db.json');
        request.responseType = 'json';
        request.send();

        request.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200){
            createQuestion(request.response)
            console.log(request.response);

          }
        }   
      }
      getQuestion();
    function createQuestion(array) {

            let questionElement,
                answerElement,
                answerElementArr,
                textAnswer,
                falseAnswerIndex,
                trueAnswerIndex;

              array.forEach((item, i)=>{
                answerElementArr = [];

                falseAnswerIndex = 0;
                trueAnswerIndex = 0;

                for (let i = 0; i < item.ansTrue.length + item.ansFalse.length; i++){
                  if(i < item.ansFalse.length){
                    textAnswer = item.ansFalse[falseAnswerIndex];
                    falseAnswerIndex++;
                  } else {
                    textAnswer = item.ansTrue[trueAnswerIndex];
                    trueAnswerIndex++;
                  }
                  answerElement = $(`<div class="answer-item"><div class="answer-item__text">${textAnswer}</div></div>`)
                  answerElementArr.push(answerElement);
                }
                questionElement = {
                  text: item.text,
                  answerElementArr: answerElementArr,
                  pointScore: item.pointScore,
                  ansTrue: item.ansTrue
                }
                questionElementArr.push(questionElement);
              })
              console.log(questionElementArr)
              console.log(questionElementArr[0]) //выводится элемент с нулевым индексом
          }
console.log(questionElementArr)
console.log(questionElementArr[0]) //undefined 

Ответы (1 шт):

Автор решения: Yugofx

getQuestion() производит манипуляцию с вашим массивом асинхронно. Это значит, что сразу за вызовом getQuestion() выполнятся логи пустого массива, а потом в коллбеке ответа он заполнится значениями.

1. getQuestion()
2. console.log(questionElementArr)
3. console.log(questionElementArr[0])
4. onreadystatechange function
→ Ссылка