calling firebase inside an forEach makes the iteration not work

Question

Goal:

Im trying to make an array of objetcs including 3 informations: id, title and imageUri. But when i try to get the imageUri value from firebase(an image download URL from firebase) to download this image in another component, the iteration of forEach freezes. Thank you for your time :)

Warning:[Unhandled promise rejection: TypeError: JSON.stringify cannot serialize cyclic structures.]

observation: When i remove the firebase part imageUri: firebase..., the whole thing works!

the function:

    processData = ( data ) => {
        console.log('---------data received from loadData(Main.js:70)--------\n', data)
        var localProcessedData = [];

        Object.entries(data).forEach( ([key, value]) => {
          var event = {
            id: key,
            title: Object.getOwnPropertyDescriptor(value, "eventTitle").value,
            imageUri: firebase.storage().ref('events/active/' + key + '/image').getDownloadURL()
          }
          localProcessedData.push(event);
        })

        this.setState({
          processedData: localProcessedData,
          eventsDataIsLoaded: true,
        })
      }

The type of params the function recieve:

     Object {
      "-M-I83aV9t1fezOsBn17": Object {
        "active": true,
        "created": "2020-02-05T02:18:30.772Z",
        "description": "Olimpiadas Inter Atletica",
        "eventTitle": "oia",
        "location": "Uberlandia",
        "owner": "p87xn6x8DZTwb6qyTadhkk3UxJV2",
        "price": "130",
        "startDate": "15",
        "time": "14",
        "updated": "2020-02-05T02:18:30.772Z",
      },
      "-M-KlUH-zQhnIhb6wMH8": Object {
        "active": true,
        "created": "2020-02-05T14:34:20.399Z",
        "description": "Cia 2020",
        "eventTitle": "Cia",
        "location": "Uberlandia",
        "owner": "p87xn6x8DZTwb6qyTadhkk3UxJV2",
        "price": "130340",
        "startDate": "15",
        "time": "14",
        "updated": "2020-02-05T14:34:20.399Z",
      }
    }

Expected:

My goal is to transform that whole data in an array like this:

    Array [
      Object {
        "id": "-M-I83aV9t1fezOsBn17",
        "title": "oia",
        "imageUri": "image url from firebase"
      },
      Object {
        "id": "-M-KlUH-zQhnIhb6wMH8",
        "title": "Cia",
        "imageUri": "image url from firebase"
      }
    ]

user11537130 user11537130 · Accepted Answer · 2020-02-06T04:15:57

Based on firebase documentation. FIrebase Storage getDownloadUrl is a promise

https://firebase.google.com/docs/reference/js/firebase.storage.Reference.html#get-downloadurl

solution is to implement an async/await

async processData = ( data ) => {
    console.log('---------data received from loadData(Main.js:70)--------\n', data)
    var localProcessedData = [];

     Object.entries(data).forEach( async([key, value]) => {
      var event = {
        id: key,
        title: Object.getOwnPropertyDescriptor(value, "eventTitle").value,
        imageUri: await firebase.storage().ref('events/active/' + key + '/image').getDownloadURL()
       }
       localProcessedData.push(event);
    })

    this.setState({
      processedData: localProcessedData,
      eventsDataIsLoaded: true,
    })
}

this code is not yet tested.

calling firebase inside an forEach makes the iteration not work

Goal:

Expected:

1 Answers