1

I am trying to iterate through an array of objects in react native but some reason I can't do it. This is what my array looks like. here is the array

When I try to map through this array with arr.map((item,key) => console.log(item.id)) nothing happens in debugger.

Any help?

Edit2: This is the full function.

getPhotos = async () => {
        var firebaseStorageRef = await firebase.storage().ref();
        const photos = [];
        const documentSnapshot = await firestore()
            .collection('pictures')
            .doc(this.props.route.params.tc)
            .collection('photos')
            .get()
            .then(function (querySnapshot) {
                querySnapshot.forEach(function (doc) {
                    const imageRef = firebaseStorageRef.child(doc.data().path);
                    imageRef.getDownloadURL().then(data => photos.push(
                        {id: doc.id, link: data}
                    ))
                })
            });

        console.log(photos); //This shows the array in the debugger
        photos.map((item,key) => console.log(item)); //Nothing executes in this line
    }
8
  • Can you give a larger code snippet of what your issue is? There isn't enough detail here to answer your question. Apr 2, 2020 at 13:15
  • I edited the question. Thank you for your feedback! Apr 2, 2020 at 13:25
  • Do you run the map inside a component? Where do you run the map? What's meant to trigger that line of code to run? Show me that line in context of where it is being implemented. Apr 2, 2020 at 13:44
  • I am executing map in the same function that i get the information from firebase. This function is in a class that extends Component. I am going to create a List from some View elements in the same function and return that list to render method. Apr 2, 2020 at 13:56
  • So you're saying that after the imageRef.getDownloadURL... line of code you can run console.log(photos) and you get a result of photos and if you do photos.map((item,key) => console.log(item.id)) after that console log and you get nothing? Apr 2, 2020 at 14:41

1 Answer 1

1

The problem is in this code fragment imageRef.getDownloadURL().then because this promise not wait in each iteration and set the forEach as async is not solution.

Try this code, which should solve your problem.

getPhotos = async () => {
    var firebaseStorageRef = await firebase.storage().ref();
    const photoPromises = [];
    const documentSnapshot = await firestore()
        .collection('pictures')
        .doc(this.props.route.params.tc)
        .collection('photos')
        .get();
    documentSnapshot.forEach(doc => {
        photoPromises.push((async (doc) => {
            const imageRef = firebaseStorageRef.child(doc.data().path);
            const link = await imageRef.getDownloadURL();
            return { id: doc.id, link };
        })(doc));
    });

    console.log(photoPromises); //This shows the array in the debugger
    const photos = await Promise.all(photoPromises);
    photos.map((item, key) => console.log(item)); //Nothing executes in this line
}

getPhotos();
1
  • This is what i needed. I was so confused for hours. Apparently i need to learn more about await async and promises. Thank you so much it works! I am accepting as an answer. Apr 2, 2020 at 20:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.