Load array of object with their id in : react native + firebase

Question

I come from C++, C, Python space and I'm new to react native / JS / back-end world.

I have some issues loading data from firebase. Here is what I want :

My Database :

users : uid : postids[]
posts : postids : content

I want to load the postids[] array from a user and then, load content of every postids[] in this array (according to every postids in the postids[] array).

Here is my code :

    _getPostsFromDatabase() {
    var docRef = firebase.firestore().collection("users").doc(firebase.auth().currentUser.uid);

    return docRef.get().then(function(doc) {
        if (doc.exists) {
          return doc.data()["posts"];
        }
    }).catch(function(error) {
        alert("Error getting document:", error);
    });
  }

  _loadPosts() {

    var new_posts = [];

    this._getPostsFromDatabase()
      .then(res => {

        var i;
        for (i = 0; i < res.length; i++) {

          firebase.firestore().collection("posts").doc(res[i])
            .onSnapshot(function(doc) {
                new_posts.push(doc.data());
                console.log(new_posts); --> This line print correct data 
            });
        }

      })
      .catch(error => console.log(error));

      console.log(new_posts); ---> This line print an empty array

  }

  componentDidMount() {
    this._loadPosts()
  }

So I want this behavior :

In componentDidMount I begine the routine --> this works
loadPosts is loading the postids[] array with _getPostsFromDatabase() function --> this works
Then, I make a for loop to push every object in an array to set the state at the end --> FAIL

At step 3, everything f... up, I made some console log to debug but there is a huge real time issue because evrything is printed randomly.

How can I get my new_posts filled array at the end of the for loop to setState. Maybe I'm wrong with this method, or if I'm not, I must have some issues with Async funtion ?

Is there an expert to help me understund better what is inside this kind of use case ?

Thanks

Tom Slutsky · Accepted Answer · 2020-04-19 11:25:19Z

2

Basically the problem is that you are trying to perform an asynchronous code in a synchronous way. You solution might be waiting for all promises to resolve.

_loadPosts() {

    this._getPostsFromDatabase()
      .then(res => {
       let promises = res.map(id => {
         return firebase.firestore().collection("posts").doc(id)
            .get().then(doc => doc.data())

        })
    Promise.all(promises).then(res => {console.log(res);})





  }

answered Apr 19, 2020 at 11:25

Tom Slutsky

7346 silver badges11 bronze badges

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

1 Comment

Alexy Over a year ago

Thanks you, it works as expected. Very clear ! I missed the map features and Promise.

Goskula Jayachandra · Accepted Answer · 2020-04-19 11:31:10Z

1

Your console will log before the for loop, that's the reason you are getting an empty array just include your console in the response just like this:

 this._getPostsFromDatabase()
      .then(res => {

        var i;
        for (i = 0; i < res.length; i++) {

          firebase.firestore().collection("posts").doc(res[i])
            .onSnapshot(function(doc) {
                new_posts.push(doc.data());
                console.log(new_posts); --> This line print correct data 
            });
        }
        console.log(new_posts); ---->Include here
      })

Hope this helps!

answered Apr 19, 2020 at 11:31

Goskula Jayachandra

4,2212 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Load array of object with their id in : react native + firebase

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