API returns Object

Question

I am trying to get data from the RIDB API while using ReactJS. I get back data

function TryFetch() {
    const [camps, setCamps] = useState([]);
    
    

    useEffect(() => {
        axios.get(api)
            .then( res => {
                console.log(res)
                setCamps(res.data)
            })
            .catch(err => {
                console.log(err);
            })
    }, [])

    return (

            <div>
                <ul>

                    {camps && camps.RECDATA.map(post => (
                        <li key={post.CampsiteID}>{post.CampsiteID}</li>

                    ))}
                    
                    
                    
                </ul>   
            </div>


        )
}

Data returned from API Call

{
RECDATA: [

{
    CampsiteID: "23480",
    FacilityID: "232732",
    CampsiteName: "25",
    CampsiteType: "STANDARD ELECTRIC"
},

{
    CampsiteID: "25550",
    FacilityID: "232732",
    CampsiteName: "35",
    CampsiteType: "STANDARD ELECTRIC"
},

{
    CampsiteID: "27520",
    FacilityID: "232732",
    CampsiteName: "27",
    CampsiteType: "STANDARD ELECTRIC"
} 

]

}

How can I loop through the object in React to display the individual camp sites info? I keep getting TypeError: Cannot read property 'map' of undefined

This should help https://stackoverflow.com/q/41374572/7785337.. You need to use ```.map()``` to display each items from array in UI.. — Maniraj Murugan, Oct 20 '20 at 05:21

score 2 · Answer 1 · edited Oct 20 '20 at 19:38

2

You can use this as follows:

const data = { RECDATA: [

{ CampsiteID: "23480", FacilityID: "232732", CampsiteName: "25", CampsiteType: "STANDARD ELECTRIC"},

{ CampsiteID: "25550", FacilityID: "232732", CampsiteName: "35", CampsiteType: "STANDARD ELECTRIC"},

{ CampsiteID: "27520", FacilityID: "232732", CampsiteName: "27", CampsiteType: "STANDARD ELECTRIC"}

]};

<ul>
   {
      data && data.RECDATA.map(recordItem => {
          return <li>{recordItem.CampsiteType}</li>
      });
   }
</ul>

edited Oct 20 '20 at 19:38

Zze

18,229
13
85
118

answered Oct 20 '20 at 05:18

Aadil Mehraj

2,586
1
7
17

I've tried your solution and I keep getting. TypeError: Cannot read property 'map' of undefined – Derek Biz Oct 20 '20 at 17:45
Try to log `data`, check whether it has a `RECDATA` as a array field – Aadil Mehraj Oct 21 '20 at 05:15

score 0 · Answer 2 · answered Oct 20 '20 at 05:18

Its verysimple

you can do this something like below

var apiData={RECDATA: [{CampsiteID: "23480", FacilityID: "232732", CampsiteName: "25", CampsiteType: "STANDARD ELECTRIC"},{ CampsiteID: "25550", FacilityID: "232732", CampsiteName: "35", CampsiteType: "STANDARD ELECTRIC"},{ CampsiteID: "27520", FacilityID: "232732", CampsiteName: "27", CampsiteType: "STANDARD ELECTRIC"}]}

apiData.RECDATA.forEach(function(o){
   console.log(o.CampsiteID)
   console.log(o.CampsiteName)
})

In a React you can do something like below

 {
  data.RECDATA.forEach(recordItem => {
      return <li>{recordItem.CampsiteType}</li>
   });
 }

In react we use only ```.map()``` to return the values and won't use ```forEach()``` .. Because, basically ```map``` returns an array while ```forEach``` returns nothing, — Maniraj Murugan, Oct 20 '20 at 05:23

score 0 · Answer 3 · edited Oct 20 '20 at 09:21

const result = { RECDATA: [

{ CampsiteID: "23480", FacilityID: "232732", CampsiteName: "25", CampsiteType: "STANDARD ELECTRIC"},
{ CampsiteID: "25550", FacilityID: "232732", CampsiteName: "35", CampsiteType: "STANDARD ELECTRIC"}, 
{ CampsiteID: "27520", FacilityID: "232732", CampsiteName: "27", CampsiteType: "STANDARD ELECTRIC"}
 
]};

<ul>
   {
      result && result.RECDATA.map(({CampsiteType}, index) =>
          <li key={`RECDATA_${index}`}>{CampsiteType}</li>
      );
   }
</ul>

API returns Object

3 Answers3