How do I loop all Firebase children in React Native?

johanjohansson

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
}
soutot

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How do I loop through the children of a Firebase instance

From Dev

How do I access children components of a reference in React Native Web?

From Dev

How do I display all of the images from my Firebase Storage in React Native without needing image names?

From Dev

How do i get all children (ie children of children) with Javascript?

From Dev

How do I implement firebase using React native?

From Dev

How do I get all the children objects of the children objects of an object?

From Dev

How to get all children in firebase

From Dev

In Firebase, how do I grab the first children of a snapshot?

From Java

How do I apply a style to all children of an element

From Dev

how do I collapse parent content if all children are collapsed

From Dev

How do I delete all "children" of an object in my bucket?

From Dev

How do I find the all of the sibling's children records?

From Dev

How do I get all children that fall under a parent in eloquent?

From Dev

How do I loop through and get all the keys of the nested nodes in firebase?

From Dev

How do I listen to email verification event with firebase authentication and react native?

From Dev

How do I enable multidex for react native?

From Dev

How do I properly debug in React Native?

From Dev

How do I implement a NamingContainer? All children get the same client ID

From Dev

How do I associate a parent node with all of its children in an event listener? jQuery / JavaScript

From Dev

How do I hide expander in Hierarchical Data Template when all children are collapsed or hidden?

From Dev

jquery/javascript: How do I remove the 'active' class from all the children of a parent element?

From Dev

How do I set ACLs for a directory so that a particular user has rwx access for the directory and all children?

From Dev

How do I get all the children of a table without knowing their type, returned to a list?

From Dev

How do I get all data from firebase into list<myObject>

From Dev

How do I loop through all compositions in an After Effects project?

From Dev

How do I add all results from my loop

From Dev

How do i check for all the files sizes in a directory while in a loop?

From Dev

how do i set notifications for all dates generated in a for loop

From Dev

How do I loop through json with arrays and get all the value?

Related Related

  1. 1

    How do I loop through the children of a Firebase instance

  2. 2

    How do I access children components of a reference in React Native Web?

  3. 3

    How do I display all of the images from my Firebase Storage in React Native without needing image names?

  4. 4

    How do i get all children (ie children of children) with Javascript?

  5. 5

    How do I implement firebase using React native?

  6. 6

    How do I get all the children objects of the children objects of an object?

  7. 7

    How to get all children in firebase

  8. 8

    In Firebase, how do I grab the first children of a snapshot?

  9. 9

    How do I apply a style to all children of an element

  10. 10

    how do I collapse parent content if all children are collapsed

  11. 11

    How do I delete all "children" of an object in my bucket?

  12. 12

    How do I find the all of the sibling's children records?

  13. 13

    How do I get all children that fall under a parent in eloquent?

  14. 14

    How do I loop through and get all the keys of the nested nodes in firebase?

  15. 15

    How do I listen to email verification event with firebase authentication and react native?

  16. 16

    How do I enable multidex for react native?

  17. 17

    How do I properly debug in React Native?

  18. 18

    How do I implement a NamingContainer? All children get the same client ID

  19. 19

    How do I associate a parent node with all of its children in an event listener? jQuery / JavaScript

  20. 20

    How do I hide expander in Hierarchical Data Template when all children are collapsed or hidden?

  21. 21

    jquery/javascript: How do I remove the 'active' class from all the children of a parent element?

  22. 22

    How do I set ACLs for a directory so that a particular user has rwx access for the directory and all children?

  23. 23

    How do I get all the children of a table without knowing their type, returned to a list?

  24. 24

    How do I get all data from firebase into list<myObject>

  25. 25

    How do I loop through all compositions in an After Effects project?

  26. 26

    How do I add all results from my loop

  27. 27

    How do i check for all the files sizes in a directory while in a loop?

  28. 28

    how do i set notifications for all dates generated in a for loop

  29. 29

    How do I loop through json with arrays and get all the value?

HotTag

Archive