Home > OS >  Accessing nested data object using React
Accessing nested data object using React

Time:12-19

This is my first time using React and I am having an issue accessing a nested data object.

I want to access the commute value under each object. I can access the top level data like activities.length. But, when I attempt something like activities[0].commute I am unsuccessful.

My goal is to list all activities with their respective commute values.

Any help is incredibly appreciated. Thanks!

Here's the code:

import React, { useState, useEffect } from 'react';

function App() {
const [isLoading, setIsLoading] = useState(true)
const [activities, setActivities] = useState({})


let clientID = "****";
let clientSecret = "****";


const refreshToken = "****";
const callRefresh = `https://www.strava.com/oauth/token?client_id=${clientID}&client_secret=${clientSecret}&refresh_token=${refreshToken}&grant_type=refresh_token`


const callActivities = `https://www.strava.com/api/v3/athlete/activities?access_token=`

useEffect(() => {
fetch(callRefresh, {
  method: 'POST'
})


.then(res => res.json())
.then(result => getActivities(result.access_token))
}, [callRefresh])


function getActivities(access){
  fetch(callActivities   access)
  .then(res => res.json())
  .then(data => setActivities(data), setIsLoading(prev => !prev))
  .catch(e => console.log(e))
 }

function showActivities(){
if(isLoading) return <>LOADING</>
if(!isLoading) {
  console.log(activities)
 return activities.length
  }
}

return (
  <div className="App">
 {showActivities()}
</div>
   );
  }

 export default App;

Here's the data: enter image description here

CodePudding user response:

If activities is a list, then the default value needs to be a list.

const [activities, setActivities] = useState([]);

Then simply map activities into a list of components.

function showActivities() {
  if(isLoading) return <>LOADING</>;

  return (activities || []).map(activity => {
    return <Text>{activity.commute}</Text>;
  });
}

CodePudding user response:

You will now have access to the nested data objects, listing all activities with their respective commute values.

import React, { useState, useEffect } from 'react';

function App() {
const [isLoading, setIsLoading] = useState(true)
const [activities, setActivities] = useState([]);


let clientID = "****";
let clientSecret = "****";


const refreshToken = "****";
const callRefresh = `https://www.strava.com/oauth/token?client_id=${clientID}&client_secret=${clientSecret}&refresh_token=${refreshToken}&grant_type=refresh_token`


const callActivities = `https://www.strava.com/api/v3/athlete/activities?access_token=`

useEffect(() => {
fetch(callRefresh, {
  method: 'POST'
})


.then(res => res.json())
.then(result => getActivities(result.access_token))
}, [callRefresh])


function getActivities(access){
  fetch(callActivities   access)
  .then(res => res.json())
  .then(data => setActivities(data), setIsLoading(prev => !prev))
  .catch(e => console.log(e))
 }

function showActivities() {
  if(isLoading) return <>LOADING</>;

  return (activities || []).map(activity => {
    return <Text>{activity.commute}</Text>;
  });
}

return (
  <div className="App">
 {showActivities()}
</div>
   );
  }

 export default App;
  • Related