Unable to access javascript array, and loop not working

Question

Now i know that there's a possibility that my question has a duplicate. But even so, I'd appreciate it if you directed me to the right answer if possible.

Am kinda new to new to javascript and my problem is that I am unable to loop through an array.

so here's my script

 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);
});

all am trying to do is get a list of image urls from firebase storage and store them in an array and then use a for loop to display each of them to the html page. Now, when i log console.log(links[1]) i get undefined, and the for loop does not run altogether.

Any with any ideas, please help out. regards.

You would have to first learn what promises are, then learn how to use async before asking this question because the answer won't make sense to you and will just be a copy-paste rather than actually helping you be better. — King Friday
– King Friday, Commented Apr 18, 2020 at 17:10

chingcm · Accepted Answer · 2020-04-18 16:55:46Z

1

That is because you are pushing url to the array in the promise function itemRef.getDownloadURL() but calling console.log(links) out of the promise. console.log may run before you push url to the array.

Here is a way to modify your code:

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

However, you may need to do research on handling promise in loops so you get links with all URLs (e.g. Promise.all(), await/async)

answered Apr 18, 2020 at 16:55

chingcm

1211 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

itwabi Over a year ago

thanks man,.... solved my problem. and I'll be sure to read on async tasks in javascript

Taliane Tchissambou · Accepted Answer · 2020-04-18 16:53:42Z

0

getDowloadUrl seems to be an async function so when you call log, links is empty because you did not get any answer yet.

answered Apr 18, 2020 at 16:53

Taliane Tchissambou

211 bronze badge

Collectives™ on Stack Overflow

Unable to access javascript array, and loop not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related