Recieve data from firebase

Question

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:

Database:

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, }, ]

Joppe Meijers · Accepted Answer · 2020-02-12 12:30:44Z

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.

Amogh Hegde · Accepted Answer · 2020-02-12 12:16:05Z

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)

Collectives™ on Stack Overflow

Recieve data from firebase

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related