How do I loop all Firebase children in React Native?

Question

ANSWER AT BOTTOM OF POST (ALSO SEE @soutot ANSWER)

I have successfully gained text output from my Firebase code and so I know it works. Now I need to loop all the children in Firebase. Coming from swift, the way to do it is to store each item on a tempObject then append that to an array. Then you can simply use that array any way you like. This doesn't seem to work with JavaScript, or I'm doing something wrong. The fully functional FB code I now have is:

componentDidMount(){ let child = "" var ref = firebase.database().ref("testCategory"); ref.once("value") .then(function(snapshot) { child = snapshot.child("test1/testHeader").val() this.setState( { child }) }.bind(this)); }

I can then successfully print this in console or in <Text>. Now, the problem I'm having is looping all children, adding them to an array, then using that array to display the data. In my head, this is how it should work:

componentDidMount(){ let child = "" var ref = firebase.database().ref("testCategory"); ref.once("value") .then(function(snapshot) { snapshot.forEach(function(childSnapshot){ let tempObject = MyFirebase tempObject.testHeader = childSnapshot.val() myArray.append(tempObject) //or .push??? }) this.setState( { //PASSING VARIABLE TO STATE child }) }.bind(this)); //BINDING TO SET STATE }

I know that this is obviously wrong. Creating an object like that doesn't even work... MyFirebase -class looks like this:

render() { let testHeader = "" let testText = "" ) }

My Firebase database looks like this: FB DB (I ignored subText for now)

All suggestions are much appreciated :)

WORING CODE

 //FIREBASE CODE componentDidMount(){ const ref = firebase.database().ref("testCategory"); ref.once("value") .then(function(snapshot) { const categories = [] //LOOPING EACH CHILD AND PUSHING TO ARRAY snapshot.forEach(item => { const temp = item.val(); categories.push(temp); return false; }); this.setState( { //PASSING VARIABLE TO STATE child, categories }) }.bind(this)); //BINDING TO SET STATE }

In case of Realtime Database, data is stored as JSON, so your question seems to be: how to recursively iterate over an object. — Ronnie Smith
– Ronnie Smith, Commented Apr 6, 2018 at 16:57

soutot · Accepted Answer · 2018-04-06 16:23:54Z

According to the code you provided, it looks like it works until this point

var ref = firebase.database().ref("testCategory"); ref.once("value") .then(function(snapshot) {

Am I correct?

From this point, if you add a console.log(snapshot.val()) it might print an array of objects, something like this: [ { test1: { testHeader: 'FirstHeader', testText: 'FirstText' } }, { test2: { testHeader: 'SecondSub', testText: 'SecondSub } }]

Right?

If so, you can for example store this snapshot into your state and then consume this state in your render method. Something like this:

const ref = firebase.database().ref('testCategory'); ref.once('value').then((snapshot) => { this.setState({ categories: snapshot.val() }); });

Then in your render method:

const { categories } = this.state; categories.map(category => <Text>{category.testHeader}</Text>)

The result in your screen should be: FirstHeader SecondSub

Let me know if this helped

Some links that might explain more about es6 codes I used in this example:

array map categories.map(...): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

object destructuring const { categories } = this.state: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

const instead of var const ref = ...: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

setState: https://reactjs.org/docs/state-and-lifecycle.html

arrow function (snapshot) => ...: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Some about firebase snapshots: https://firebase.google.com/docs/reference/js/firebase.database.DataSnapshot

Hope it helps

Thanks a bunch for your help. Didn't quite get it to work as array tended to store JSON data instead of array variables, if that makes sense. Maybe I misunderstood some part of your post. Anyway, was helped alot by your post and got it right using forEach. See my post above. :)
Great, nice to know you could handle it. Looking at your code, it might have a little issue in the future. JS works sync, if you have a large list of items, your code might call setState before your forEach looped through all your items. Maybe you'll need it to be async. To do so, you need to use async/await to tell your code to wait until forEach is finished to then go to next step. Something like: .then(async function(snapshot) (...) await snapshot.forEach (...) Docs: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Thanks for the info, I'll definitely take that into consideration! :)

Collectives™ on Stack Overflow

How do I loop all Firebase children in React Native?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related