JSON format between Firebase and React Native Flatlist

Question

This is what data are stored in Firebase Realtime Database

"Users" : {
  "Joe" : {
    "name" : "xxx",
    "email" : "xxx"
 },
 "Matt" : {
    "name" : "xxx",
    "email" : "xxx"
 }
}

This is what data need in React Native Flatlist

 Users : [
  {
    id : "Joe"
    name : "xxx",
    email : "xxx",
  },
  {
    id : "Matt"
    name : "xxx",
    email : "xxx",
  }
]

Somewhere in componentDidMount()..

firebase.database("Users").ref().once('value').then(function(snapshot) {
    var arr = _.values(snapshot.val());
    this.setState({ users: JSON.stringify(arr) });
})

In render Flatlist :

   <FlatList
           extraData={this.props}
           data={this.props.users}
           keyExtractor={(item, index) => index.toString()}
           renderItem={({ item }) => (
    ...

How can i use firebase.database().ref() and return what it's look like the data need in flatlist?

data should an array or array of objects – Aravind S Aug 03 '18 at 05:19 — Aravind S, Aug 03 '18 at 05:19
Can you share some piece of code of what you have tried? – iRiziya Aug 03 '18 at 06:32 — iRiziya, Aug 03 '18 at 06:32
@iRiziya i just update the question – ggDeGreat Aug 03 '18 at 06:53 — ggDeGreat, Aug 03 '18 at 06:53

score 1 · Accepted Answer · answered Aug 03 '18 at 06:58

You can try something like this:

First in my constructor

constructor(props) {
    super(props);

    this.state = {
        arrData:[]
    };
}

then fetch data from firebase

var ref = firebase.database().ref("Users"); //Here assuming 'Users' as main table of contents   

ref.once('value').then(snapshot => {
    // console.log(snapshot.val());

     // get children as an array
     var items = [];
     snapshot.forEach((child) => {
       items.push({
          id: child.val().id,
          name: child.val().name,
          email: child.val().email,
          phone: child.val().phone,
          status: child.val().status,
          user_type: child.val().user_type

       });
    });

    this.setState({ arrData: items});
});

and now you can populate arrData in your FlatList or ListView.

Hope it helps you!

Engr.Aftab Ufaq · Answer 2 · 2020-02-10T13:19:11.653

0

here I get the array of the problem which have posted by a user in an object then I make an array and then assigned that array to the variable.

componentDidMount(){
  let user =  firebase.auth().currentUser ;
  let uid = user.uid;
  firebase.database().ref('Problems').orderByChild('userid').equalTo(uid)
  .once('value' )
  .then(snapshot => {
     // console.log(snapshot.val());
    var items = [];
     snapshot.forEach((child) => {
       items.push({
          id: child.key,
          problemDescription: child.val().problemDescription,
          problemTitle: child.val().problemTitle,
          problemstatus: child.val().problemstatus,
          timeanddate: child.val().timeanddate,
       });
    });
    console.log(items);
    this.setState({problmes: items}); 
    this.setState({isloading:false});
  })
  .catch(error => console.log(error));

}

edited Feb 10 '20 at 13:19

answered Feb 06 '20 at 12:54

Engr.Aftab Ufaq

3,356
3
21
47

1

Welcome to Stackoverflow! Please edit your answer provide an explanation. StackOverflow does not like code only answers and it was placed on a low-quality post queue to review for deletion. To prevent deletion please clarify what it does. – clearlight Feb 06 '20 at 19:00
See "[Explaining entirely code-based answers](https://meta.stackoverflow.com/q/392712/128421)". While this might be technically correct it doesn't explain why it solves the problem or should be the selected answer. We should educate in addition to help solve the problem. – the Tin Man Feb 07 '20 at 00:14

JSON format between Firebase and React Native Flatlist

2 Answers2