React native cannot set multiple arrayitems from Firebase in loop

Question

I am trying to get data from Firebase realtime database in the loop and set array items, but just the last item can set. it's looking like synchronize problems I tried a lot of things but couldn't solve it.

import FireBaseConnection from '../classes/firebaseconnection.js';

 const  getComments = () => {
    let cardatafetch=[]
     FireBaseConnection.GetData('/PostComments/1234').then((comments) => {
        for (i in comments) {
            cardatafetch.push(comment[i]) 
        }

 for (j in cardatafetch) { 
     var UserId =  cardatafetch[j]["UserID"]   

  FireBaseConnection.GetData('/Users/'+UserId).then((user) => {

     cardatafetch[j].ProfilePicture=user["ProfilePicture"] 
          })
        .catch((error) => {
           console.log(error)
              });
 }
       console.log(cardatafetch)

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

 }
    }

Console Output is

Same problem also during get images from storage

   for (j in cardatafetch) { 
  FireBaseConnection.GetImage().then((obj) => {
     cardatafetch[j].ProfilePicture=obj
          })
             .catch((error) => {
           console.log(error)
              }); 
 }

FireBaseConnection Class

import database from '@react-native-firebase/database';
import storage from '@react-native-firebase/storage';
import { utils } from '@react-native-firebase/app';

 class FireBaseConnection
 {
  static async  GetData(refValue) {
        let data;
 await database()
  .ref(refValue)
  .once('value')
  .then(snapshot => {
    data =  snapshot.val();
  });
  return data;
}

static async  GetImage(imgValue) {
 const reference = storage().ref(imgValue);
 let imagePath= await reference.getDownloadURL().then(result =>result);
return imagePath;
}
}
export default FireBaseConnection;

Rıdvan GÜNEŞ · Accepted Answer · 2020-04-15 11:10:10Z

1

Try below code, what I have done is put your code inside last iteration of the loop so it will be implemented only once when all the items are pushed in the array.

import FireBaseConnection from '../classes/firebaseconnection.js';

const getComments = () => {
    return new Promise((resolve, reject) => {
        let commentsArr = [];
        FireBaseConnection.GetData('/PostComments/1234').then((comments) => {
            Object.keys(comments).forEach((key, index) => {
                commentsArr.push(comments[key])

                if(index == Object.keys(comments).length-1) {
                    resolve(commentsArr);
                }
            });
        }).catch((error) => {
            console.log(error)
        });
    });
}

const addImagesToComment = () => {
    this.getComments().then((comments) => {
        var finalArr = [];
        comments.forEach((comment, index) => {
            var tempComment = comment;
            var UserId = comment["UserID"]
            FireBaseConnection.GetData('/Users/' + UserId).then((user) => {
                tempComment.ProfilePicture = user["ProfilePicture"]
                finalArr.push(tempComment);
            }).catch((error) => {
                console.log(error)
            });

            if(index == comments.length-1) {
                console.log(finalArr)
            }
        });
    });
}

Try calling getComments function.

edited Apr 15, 2020 at 11:10

Rıdvan GÜNEŞ

156 bronze badges

answered Apr 15, 2020 at 10:11

Neetin Solanki

6814 silver badges19 bronze badges

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

1 Comment

Rıdvan GÜNEŞ Over a year ago

comments.length not working for json result. i tried const commentLength =Object.keys(comments).length for length it was okey for lenght but still same result. just last item setted

Collectives™ on Stack Overflow

React native cannot set multiple arrayitems from Firebase in loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related