CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-realtime-database
Steven Daniel Anderson
Steven Daniel Anderson

Reputation: 1443

How can I loop, return and render an object in react

I have an object that looks like this:

{
  "startups" : {
    "startup0":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Hog dog or not Hot dog",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "[email protected]",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  },
  "startup1":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Big Brother",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "[email protected]",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  }
  }

}

I initialize my state in this form:

this.state={
      startups:[]

Here I call to firebase to set my state:

 componentDidMount(){
    const rootRef = firebase.database().ref().child('startups')
    rootRef.once('value', snap =>{
      this.setState({

        startups: this.state.startups.push(snap.val())

      });
    }

);

} I have tried looping in different ways: 1.

formatStartUps(){
   const startups = [this.state.startups];
   startups.forEach((element)=>{console.log(element)} )
 }

2.

formatStartUps(){
       const startups = [this.state.startups];
       startups.map((startup,index)=>{<p key={index}>{startup}</p>))
     }

3.

formatStartUps(){
           const startups = [this.state.startups];
           for(let startup of startups){
            console.log(startup)
            }
         }

And then I call to the fire-base database to set my state and works, but I can't loop to each startup to render these values in my div.

How can I loop this object and render each value in my render() method? I appreciate the help

Upvotes: 0

Views: 157

Answers (3)

Ved
Ved

Reputation: 12103

Use: Object.keys(objectName) to loop the object

var data = {
  "startups" : {
    "startup0":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Hog dog or not Hot dog",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "[email protected]",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  },
  "startup1":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Big Brother",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "[email protected]",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  }
  }

}

Object.keys(data.startups).map(function(property){
   console.log(data.startups[property].achievements);
  
})

Upvotes: 1

Andrii Starusiev
Andrii Starusiev

Reputation: 7774

If startups an object

Object.keys(startups).map((startup) => {
  return (
    <div>{startups[startup].proyect_name}</div> //for example
  )
})

Upvotes: 1

Vikram Saini
Vikram Saini

Reputation: 2769

you can do something like that

render{
    return(
       <div>
        {
    this.state.startups.map(function(startups,i)
      {

    <li key={i}>{startups.achievements}</li>//in whatever element you want to print

      },this)
         }


        </div>
 )
 }

for more details read map or forEAch in es6

Upvotes: 0

Related Questions