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 stackoverflow.com/q/41374572/7785337.. You need to use .map() to display each items from array in UI.. — Maniraj Murugan
– Maniraj Murugan, Commented Oct 20, 2020 at 5:21

Zze · Accepted Answer · 2020-10-20 19:38:38Z

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, 2020 at 19:38

Zze

18.9k14 gold badges95 silver badges125 bronze badges

answered Oct 20, 2020 at 5:18

Aadil Mehraj

2,6141 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Derek Biz Over a year ago

I've tried your solution and I keep getting. TypeError: Cannot read property 'map' of undefined

Aadil Mehraj Over a year ago

Try to log data, check whether it has a RECDATA as a array field

Negi Rox · Accepted Answer · 2020-10-20 05:18:35Z

0

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>
   });
 }

answered Oct 20, 2020 at 5:18

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

1 Comment

Maniraj Murugan Over a year ago

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,

Ali Torki · Accepted Answer · 2020-10-20 09:21:42Z

0

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>

edited Oct 20, 2020 at 9:21

Ali Torki

2,0481 gold badge20 silver badges29 bronze badges

answered Oct 20, 2020 at 7:49

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

Collectives™ on Stack Overflow

API returns Object

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related