Использование URL-адреса хранилища файлов Firebase с CSS background background и url ()

Question

ОБНОВЛЕНИЕ

Я завернул forEach в обещание исправить промежуточную ошибку, с которой я столкнулся, но я вернулся к тому, с чего начал.Я просто пытался передать self.data в качестве параметра между функциями, но это ничего не решало.

ОБНОВЛЕНИЕ

Я думаю, что возвращаю self.data неправильнона loadData, но я не уверен, что я делаю неправильно.

this.loadData = async function() {
    var db = firebase.firestore();

    // Disable deprecated features
    db.settings({
      timestampsInSnapshots: true
    });

    var docsRef = db.collection("pools").doc(window.currentPoolId).collection("list").where("active", "==", true).orderBy("date").limit(8);

    var counter = 0;

    var result = await docsRef.get();

    console.log("querySnapshot result: "+result);
    result.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
        self.data.push(doc.data());

        console.log("result.size: "+result.size);
        console.log("self.data.length: "+self.data.length);
        console.log("counter in loadData: "+counter);
        if(result.size - 1 == counter) {
            console.log("returning self data: "+JSON.stringify(self.data));
            return self.data;
        }

        counter++;
    });
}

Вышеуказанная функция вызывается следующим образом (я думаю, что она должна быть window.pool.loadData из-за области видимости, а не this.loadData):

var result = await window.pool.loadData ();console.log ("result in populate else:" + result);

Выводит:

result in populate else: undefined

UPDATE

Я довольноуверен, что это происходит, потому что pool global еще не был создан, когда я ссылаюсь на window.pool - я думаю, что у меня возникла проблема с использованием this внутри pool global object (так как этот код находится внутриpool global object, но я собираюсь попробовать еще раз.

После использования this.data[this.total_boxes].downloadURL я получаю те же результаты - он правильно печатается в сообщении console.log, но я получаюта же ошибка говорит, что это undefined.

Я не уверен, есть ли проблема с моим порядком создания экземпляров.

---

Я пытаюсь использовать downloadURLЯ загрузил изображение после загрузки в firebase storage. Я пытаюсь использовать его в функции url() css и получаю сообщение об ошибке:

TypeError: undefined is not an object (evaluating 'window.pool.data[window.pool.total_boxes].downloadURL')

Я создаю для iOS прямо сейчас с cordova. Я использую downloadURL как это в моем javascript/css:

var item_box = document.createElement("div");
item_box.style.flex = "1 0 50%";
item_box.style.display = "flex";
item_box.style.flexDirection = "column";
item_box.style.justifyContent = "flex-end";
item_box.style.borderBottom="2px solid #9a9a9a";

//THIS IS WHERE  I USE THE `downloadURL`, ALL OTHER CODE IS FUNCTIONAL
item_box.style.background = "no-repeat center/100% url("+window.pool.data[window.pool.total_boxes].downloadURL+")";

item_box.id = "item_box_"+this.total_boxes;

У меня есть эти три консольных сообщения перед кодом выше:

console.log("window.pool.data: "+JSON.stringify(window.pool.data));
console.log("window.pool.total_boxes: "+window.pool.total_boxes);
console.log("window.pool.data[0].downloadURL: "+JSON.stringify(window.pool.data[window.pool.total_boxes].downloadURL));

Они выводят:

[Log] window.pool.data: [{"active":true,"date":"1544583167324","description":"Comp","downloadURL":"https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx","item":"Computer"}] (cordova.js, line 1732)
[Log] window.pool.total_boxes: 0 (cordova.js, line 1732)
[Log] window.pool.data[0].downloadURL: "https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx" (cordova.js, line 1732)

У меня есть это консольное сообщение после создания экземпляра элемента item_box (еще не добавленного в DOM):

console.log("item_box.style.background: "+item_box.style.background);

Вывод:

item_box.style.background: url("https://firebasestorage.googleapis.com/v0/b/pool-3f2de.appspot.com/o/share_images%2FpvxqKsDK3OelIMvWdnogYGmdqt33%2F1544583167324.jpg?alt=media&token=xxx") center center / 100% no-repeat

Похоже, что window.pool.data[window.pool.total_boxes].downloadURL не является неопределенным.

Почему я получаю ошибку undefined is not an object, когда вижу, что объект имеет правильные данные?

Answer 1

Это закончилось тем, что это был "скучный" момент, но это было очень сложно только из-за того, как я настроил свои сообщения журнала.Оказалось, что значение было неопределенным, но на самом деле оно было неопределенным только на следующем проходе цикла (элемент item_box создается внутри цикла), потому что переменная цикла стала больше, чем размер массива данных.

В какой-то момент в моем коде у меня было:

for (var i = 1; (i * this.total_rows) < (9 * this.total_rows); i++) { ...

и необходимо:

for (var i = 1; (i * this.total_rows) < ((dataz.length + 1) * this.total_rows); i++) { ...

Обратите внимание, что 9 является фиксированным числом, поэтому оно не колеблетсяс размером передаваемых данных (параметр, представляющий this.data - dataz).