Невозможно получить доступ к массиву javascript, и l oop не работает

Question

Теперь я знаю, что есть вероятность, что у моего вопроса есть дубликат. Но даже в этом случае я был бы признателен, если бы вы направили меня к правильному ответу, если это возможно.

Я новичок в javascript, и моя проблема в том, что я не могу пройти через oop через массив.

так вот мой сценарий

 var reference = firebase.storage().ref();

var listRef = reference.child('images');

var img = document.getElementById('productImageOne');
var img2 = document.getElementById('productImageTwo');
var img3 = document.getElementById('productImageThree');

var links = [];

// Find all the prefixes and items.
listRef.listAll().then(function(res) {
    res.prefixes.forEach(function(folderRef) {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
    });


    res.items.forEach(function(itemRef) {
        // All the items under listRef.
        var productRef1 = firebase.database().ref('Business/Products');
        productRef1.on('value', function(snapshot) {

            var products = snapshot.val();
            products
            const values = Object.values(products);
            values.reverse();

            for(const value of values){
                //console.log(value["ShopName"])
                if(value["ShopName"] === shop){
                    nombre = value["Name"];

                    console.log(itemRef.name.includes(value["Name"]));
                    if(itemRef.name.includes(nombre)){

                        itemRef.getDownloadURL().then(function(url) {
                            // `url` is the download URL for 'images/stars.jpg'

                            // This can be downloaded directly:
                            var xhr = new XMLHttpRequest();
                            xhr.responseType = 'blob';
                            xhr.onload = function(event) {
                                var blob = xhr.response;
                            };
                            xhr.open('GET', url);
                            xhr.send();

                            console.log(url);

                            links.push(url); //this is my array i want to iterate.

                        }).catch(function(error) {
                            // Handle any errors
                            console.log(error);
                        });

                        //this prints the array showing its contents normally
                        console.log(links); 
                        console.log(links[1]); //this gives undefined

                        //for loop doesn't even run to begin with.
                        for(const link of links){
                            console.log(link);
                            console.log("this is looping");
                        }

                    }
                }
            }
        });

    });
}).catch(function(error) {
    // Uh-oh, an error occurred!
    console.log(error);
});

все, что я пытаюсь сделать, это получить список URL-адресов изображений из хранилища Firebase и сохранить их в массиве, а затем использовать для l oop для отображения каждого из них на страницу html. Теперь, когда я захожу в console.log (ссылки [1]), я получаю неопределённое значение, и for l oop не работает вообще.

Любой, у кого есть идеи, пожалуйста, помогите. С уважением.

Answer 1

Это потому, что вы нажимаете url в массив функции обещания itemRef.getDownloadURL(), но вызываете console.log(links) из обещания. console.log может выполняться до того, как вы добавите sh url в массив.

Вот способ изменить код:

itemRef.getDownloadURL()
.then(function(url) {
  links.push(url)
})
.then(function() {
  console.log(links)
})
.catch(function (err) {
  console.log(err)
})

Однако вам может потребоваться провести исследование при обработке обещания в циклах, чтобы вы получили links со всеми URL-адресами (например, Promise.all(), await / async)

Answer 2

getDowloadUrl кажется асинхронной c функцией, поэтому при вызове журнала ссылки пустые, потому что вы еще не получили никакого ответа.