CODEWITHSUNDEEP
javascriptarraysreactjsfirebasefirebase-realtime-database
Joppe Meijers
Joppe Meijers

Reputation: 299

Recieve data from firebase

I am experimenting with React and firebase. I have a function that when the component is loaded the database is read out. The connection works and I receive the data. However, they are objects, which I would like to place structured in an array that will be read out later. I only get the error with the current code: TypeError: Cannot read property 'title' or undefined

Does anyone know how I can ensure that the data I receive from Firebase: enter image description here

Database: enter image description here

with this code:

const newEvents = [];

useEffect(() => {
    let ref = Firebase.database().ref('/events');
    ref.on('value' , snapshot => {
        var state = snapshot.val();
        let arrayCount = loopStateEvents(state);
        console.log(state);

        for(var i = 0; i < arrayCount; i++){

            newEvents.push({title: state[i].title, id: state[i].id, resourceId: state[i].resourceId,start: new Date(state[i].yearStart,state[i].monthStart,state[i].dayStart,state[i].hourStart,state[i].minuteStart,state[i].secondStart),end: new Date(state[i].yearStart,state[i].monthStart,state[i].dayStart,state[i].hourEnd,state[i].minuteEnd,state[i].secondEnd)});
            //setEventDb([...eventDb,{title: state[i].title, id: state[i].id, resourceId: state[i].resourceId,start: new Date(state[i].yearStart,state[i].monthStart,state[i].dayStart,state[i].hourStart,state[i].minuteStart,state[i].secondStart),end: new Date(state[i].yearStart,state[i].monthStart,state[i].dayStart,state[i].hourEnd,state[i].minuteEnd,state[i].secondEnd)}]);
        }


    });
},[] );

const loopStateEvents = function(object){
   var length = 0;
  for( var key in object ) {
      if( object.hasOwnProperty(key) ) {
          ++length;
      }
  }
  return length;
}

Can ensure that I get an array that is structured as follows:

const events = [
    {
      id: 0,
      title: 'Board meeting',
      start: new Date(2020, 1, 10, 9, 0, 0),
      end: new Date(2020, 1, 10, 9, 15, 0),
      resourceId: 1,
    },
    {
      id: 1,
      title: 'MS training',
      desc: 'this is a test',
      start: new Date(2020, 1, 10, 9, 0, 0),
      end: new Date(2020, 1, 10, 9, 15, 0),
      resourceId: 2,
    },
    {
      id: 1,
      title: 'MS training',
      start: new Date(2020, 1, 10, 9, 10, 0),
      end: new Date(2020, 1, 10, 9, 25, 0),
      resourceId: 2,
    },
    {
      id: 2,
      title: 'Team lead meeting',
      start: new Date(2018, 0, 29, 8, 30, 0),
      end: new Date(2018, 0, 29, 12, 30, 0),
      resourceId: 3,
    },
    {
      id: 11,
      title: 'Birthday Party',
      start: new Date(2018, 0, 30, 7, 0, 0),
      end: new Date(2018, 0, 30, 10, 30, 0),
      resourceId: 4,
    },
  ]

Upvotes: 0

Views: 55

Answers (2)

Peter Haddad
Peter Haddad

Reputation: 80944

Do the following:

let ref = Firebase.database().ref('/events');
    ref.on('value' , snapshot => {
        snapshot.forEach((childSnap) => {
        let state = childSnap.val());
        console.log(childSnap);
            newEvents.push({title: state.title, id: state.id, resourceId: state.resourceId,start: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourStart,state.minuteStart,state.secondStart),end: new Date(state.yearStart,state.monthStart,state.dayStart,state.hourEnd,state.minuteEnd,state.secondEnd)});          
    });

Use forEach to iterate inside the array and then using childSnap, access the properties using dot notation.

Upvotes: 1

Amogh Hegde
Amogh Hegde

Reputation: 432

useEffect(() => {
    let ref = Firebase.database().ref('/events');
    ref.on('value' , snapshot => {
        var state = snapshot.val();
        let events = []
        for (var key in state) {
          events.push(state[key]);
        }
    });
},[] );

use for (var key in state) so that you can directly use the object returned from firebase and push in your events array without needing the length of the object. You Can add your custom attributes in the following way:

state[key].start = new Date(state[key].yearStart,state[key].monthStart,state[key].dayStart,state[key].hourStart,state[key].minuteStart,state[key].secondStart)

Upvotes: 0

Related Questions