Issue when retrieving data from an API in react and node js : TypeError: Cannot read properties of undefined (reading '0')

Question

I cant seem to figure a way around this following error : TypeError: Cannot read properties of undefined (reading '0'). So I am calling an external API to receive financial data. From that retrieved data I call certain values and by calling the index of of where those values are stored for example api.annualReports[0].operatingCashflow. However, the odd things is that I am able to receive and have the data formatted the way I like to but most of the time it I would get the error I mentioned above.

---

Here one the approach I took:

const formatedFinancialData =  asyncHandler  (async(req, res) => {
      const { ticker } = req.body
       if(ticker){
          const formattedDate = {} 
          const cashFlow =  `https://www.alphavantage.co/queryfunction=CASH_FLOW&symbol=${ticker}&apikey=${process.env};
          const cashFlow_reponse = await fetch(cashFlow);
          const cashFlow_Json = await cashFlow_reponse.json()
    
          formattedDate.cashFlow_2021 = (cashFlow_Json.annualReports[0].operatingCashflow);
          formattedDate.cashFlow_2020 =(cashFlow_Json.annualReports[1].operatingCashflow)'
          formattedDate.cashFlow_2019 = (cashFlow_Json.annualReports[2].operatingCashflow)
    
       }
 }

After looking around for another approach I tried using axios and I encountered the same issue. Here the code for that approach...

 async function CashFlowData() {
   return await axios.get(`https://www.alphavantage.co/query?function=CASH_FLOW&symbol=${ticker}&apikey=${process.env.ALPHA_API_TOKEN}`);
}
  
try {
  const response = await CashFlowData();
  if(response.data.annualReports){
     formattedDate.cashFlow_2021 = (response.data.annualReports[0].operatingCashflow);
   }
 }

I ran into the same issue most of time I am able to receive and format the data and the other times I would get this error TypeError: Cannot read properties of undefined (reading '0').

In the front end I take in the ticker from the user and pass is along and here's example code:

const [tickerData, setTickerData] = useState([]);
const keyPress =  async (e) => {
    if(e.keyCode === 13 || e.key === 'Enter' ){
      
      e.preventDefault();
      const data = e.target.value;
      await axios.post('http://localhost:5000/api/apiData',{
        ticker: data
      }).then( res => {  
        setTickerData( res.data.formattedDate)
      }).catch((err) => {
        setErrorMsg(`${err.message} - Please try again!`)
      })
    }    
  }

I cant seem to find a way around it for quite some time now and honestly, I would really appreciate any help thank you.

Answer 1

There's a huge possibility that annualReports is not an array or is an empty array which means we can't access the first(0) object in the array hence the error: TypeError: Cannot read properties of undefined (reading '0').

Use optional chaining to avoid the error if annualReports will not always be an array or if annualReports[0] might be undefined.

Example: cashFlow_Json.annualReports[0]?.operatingCashflow