how to fetch data from firebase realtime database in react js

Question

there I am studying to fetch data from firebase realtime database I watched various youtube videos and few posts and got this far code is kinda right and don't know where I made a mistake I would be happy if someone helps me I have attached both JSON and react code for better understanding. I was only able to fetch IDs only from the database ...

here is code

import React, { Component, Fragment } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import firebase from './firebase.js';






class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      accounts: [],
      
      users: [],
    }
  }

  componentDidMount() {
    const accountRef =  firebase.database().ref('accounts');
    accountRef.on('value', (snapshot) => {
      let accounts = snapshot.val();
      let newState = [];
      for (let account in accounts) {
        newState.push({
          id:account,
          account: accounts[account].account,
          title: accounts[account].title,
          
        })
      }
      this.setState({
        accounts:newState,
      })
    })
    const userRef = firebase.database().ref('users');
    userRef.on('value', (snapshot) => {
      let users =  snapshot.val();
      let newUserState = [];
      for (let data in users) {
        newUserState.push({
          id:data,
          account:users[data].account,
          name: users[data].name,
        })
        console.log(data)
      }
    })
  }
  

  render() {
    return (
      <Fragment >
      <section>
        <div>
          <h2>User Details</h2>
            {this.state.accounts.map( data =>
            <div key={data.id}>
              {console.log(data.title)}
              <h4 >{data.account}</h4>
              <h4 >{data.name}</h4>
                </div>
              
            )}
        </div>
        <div>
          <h2>User Apps</h2>
            {this.state.accounts.map( accounts =>
            <div key={accounts.id}>
              {/* {console.log(accounts.title)} */}
              <h4 >{accounts.id}</h4>
              <h4 >{accounts.title}</h4>
                </div>
              
            )}
        </div>
      </section>
      
        
      </Fragment>
    );
  }
}
export default App;

here is josn file structure

{
  "accounts": {
    "-Kd_teAAXcw2b5MyFPIT": {
      "apps": {
        "cuckoosnest": {
          "title": "One Flew Over The Cuckoo’s Nest"
        }
      }
    },
    "-Kd_ZCjRYSGzISxY_5Wi": {
      "apps": {
        "psycho": {
          "title": "Psycho"
        }
      }
    },
    "-Kda3ClE2i0vZzyh7uh0": {
      "apps": {
        "addams": {
          "title": "The Addams Family"
        }
      }
    },
    "-Kda8nknT6-XyJE_SjCl": {
      "apps": {
        "princess-bride": {
          "title": "The Princess Bride"
        }
      }
    },
    "-KdeN0Yk89J4l5hMJ6Ea": {
      "apps": {
        "mi": {
          "title": "Mission: Impossible"
        }
      }
    },
    "-KdWbLKO0uZ0W5LYe9gj": {
      "apps": {
        "bladerunner": {
          "title": "Blade Runner"
        }
      }
    },
    "-KdWI6HAF0_wh9-NTEpe": {
      "apps": {
        "dragontattoo": {
          "title": "The Girl With The Dragon Tattoo"
        }
      }
    },
    "-KdWPnObbAbjd9lHX___": {
      "apps": {
        "nakedgun": {
          "title": "Naked Gun"
        }
      }
    },
    "-Ke4dwlXoIBXPgB8v9Pt": {
      "apps": {
        "scarface": {
          "title": "Scarface"
        }
      }
    },
    "-Ke4YQMM3aTQ-u19uIuv": {
      "apps": {
        "fargo": {
          "title": "Fargo"
        }
      }
    }
  },
  "users": {
    "00L91c7cvUaghNmGlC0lJa9eZ102": {
      "account": "-Kd_teAAXcw2b5MyFPIT",
      "name": "Randle McMurphy"
    },
    "0YRaZC6EUrc5sc8Ab4AR7Zp7ig93": {
      "account": "-Kd_ZCjRYSGzISxY_5Wi",
      "name": "Norman Bates"
    },
    "11yVrZ6TK3ZuKpITF8UVGF4ILlC3": {
      "name": "Wednesday Addams",
      "account": "-Kda3ClE2i0vZzyh7uh0"
    },
    "2d0WRN7v3lYNc9DX02yMfLmTiIM2": {
      "name": "Inigo Montoya",
      "account": "-Kda8nknT6-XyJE_SjCl"
    },
    "39IY5AX8zfgtztbQ4RFCJ0dSsel1": {
      "name": "Ethan Hunt",
      "account": "-KdeN0Yk89J4l5hMJ6Ea"
    },
    "39VBFQdD1qNgNydJ2A6kdoVLhIc2": {
      "name": "Roy Batty",
      "account": "-KdWbLKO0uZ0W5LYe9gj"
    },
    "3ACrWNFyEVObZaWMcMmZq9C045h1": {
      "name": "Lisbeth Salander",
      "account": "-KdWI6HAF0_wh9-NTEpe"
    },
    "3C9RrP8bxAVRhRcPHNBOpc5oTo83": {
      "name": "Frank Drebin",
      "account": "-KdWPnObbAbjd9lHX___"
    },
    "3kqJLMDHO2N5APYHpv5H8VtRXoj1": {
      "name": "Tony Montana",
      "account": "-Ke4dwlXoIBXPgB8v9Pt"
    },
    "44w3em7XKfhKcSSvQVk8hJIfsBQ2": {
      "name": "Marge Gunderson",
      "account": "-Ke4YQMM3aTQ-u19uIuv"
    }
  }
}

moyou · Accepted Answer · 2020-07-05 00:00:51Z

4

To fix the users data you need to do this

const userRef = firebase.database().ref('users');
userRef.on('value', (snapshot) => {
  let newUserState = [];
  snapshot.forEach(data => {
    const dataVal = data.val()
    newUsersState.push({
      id: data.key,
      name: dataVal.name,
      account: dataVal.account
    })
  })
})

for the accounts data i am not sure what information you are trying to add to the state.... you are trying to call .account & .title but that does not exist in the snapshot.. but either way your data is poorly structured and makes it difficult to manage

edited Jul 5, 2020 at 0:00

answered Jul 4, 2020 at 20:52

moyou

966 bronze badges

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

Collectives™ on Stack Overflow

how to fetch data from firebase realtime database in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related