Проблема создания массива объектов Firestore

Question

Кажется, что ничего не хранится в массиве с этим кодом:

(Предположим, showList является действительным идентификатором div; не думал, что нужно включать эти теги в код)

 var i = 0;
 var array = [];
 var showList = document.getElementById('showList');

firebase.firestore().collection('TV Shows').get().then(snapshot => {

    snapshot.forEach(doc => {

        array[i] = doc.data().show.name;
        i++;
        //console.log(doc.data().show.name);

    });

}); 

showList.innerHTML = array[4];

Достаточно забавно, что закомментированная строка console.log работает нормально и отображает все объекты, поэтому я не понимаю, почему я не могу сохранить ее в массиве.Большая часть меня чувствует, что это мое направление в использовании массива и / или переменной i, но я пометил это как проблему с firebase / firestore, а также на случай, если это окажется проблемой firebase.

Если бы кто-то мог указать мне направление записи, я был бы признателен.

Answer 1

.get() является асинхронным, и во время выполнения:

showList.innerHTML = array[4];

array еще не было инициализировано.

Вам также необходимо использовать обратные вызовы / обещания, как упомянутов связанном дубликате или просто переместите свой вызов в функцию .then():

 var showList = document.getElementById('showList');

firebase.firestore().collection('TV Shows').get().then(snapshot => {
    var array = [];
    var i = 0;

    snapshot.forEach(doc => {

        array[i] = doc.data().show.name;
        i++;
        //console.log(doc.data().show.name);

    });
    showList.innerHTML = array[4];

});