Trying to render JSON object but getting undefined

Hi guys, could someone pls point out where I’m going wrong?

I’ve got a successful response from server with the JSON object recieved and visible in the dev tools network tab, but when trying to render I keep getting undefined when trying to access it.

I’ve been trying for days, all combinations of accessing various object properties. Sorry, still a bit of a noob.

Here’s the component I’m trying to render data in:

import React from “react”; class Ratios extends React.Component { state = { isLoading: true, ratios: [], error: null, }; fetchRatios() { fetch(“https://services.example.com/v1/company/aapl/ratios”, { method: “GET”, headers: { “Ocp-Apim-Subscription-Key”: “12345”, }, }) .then((data) => this.setState({ ratios: data[“data”][“attributes”], isLoading: false, }) ) .catch((error) => this.setState({ error, isLoading: false })); } componentDidMount() { this.fetchRatios(); } render() { const { isLoading, ratios, error } = this.state; return ( <React.Fragment> <h1>Ratios</h1> {error ? <p>{error.message}</p> : null} {!isLoading ? ( ratios.map((ratio) => { const { result } = ratio; return ( <div key={result}> <p>{result}</p> <hr /> </div> ); }) ) : ( <h3>Loading…</h3> )} </React.Fragment> ); } } export default Ratios;

Here is the JSON object fetch from a 3rd party API.

{ “meta”: { “copyright”: “Copyright 2021 XXX All Rights Reserverd”, “terms”: [ “https://dev.example.com/terms” ] }, “data”: { “attributes”: { “status”: 0, “company”: { “ticker”: “aapl” }, “count”: 89, “result”: { “CashAndShortTermInvestments”: { “Name”: “Cash & Short-Term Investments”, “Historical”: { “2011-09-01T00:00:00”: 22.30, “2012-09-01T00:00:00”: 16.54, “2013-09-01T00:00:00”: 19.59, “2014-09-01T00:00:00”: 10.82, “2015-09-01T00:00:00”: 14.32, “2016-09-01T00:00:00”: 20.88, “2017-09-01T00:00:00”: 19.76, “2018-09-01T00:00:00”: 18.13, “2019-09-01T00:00:00”: 29.71, “2020-09-01T00:00:00”: 28.08 }, “Recent”: { “Latest Qtr”: 18.70 }, “Category”: { “Value”: “Balance Sheet %” } }, … “FreeCashFlowNetIncome”: { “Name”: “Free Cash Flow/Net Income”, “Historical”: { “2011-09-01T00:00:00”: 1.16, “2012-09-01T00:00:00”: 0.99, “2013-09-01T00:00:00”: 1.20, “2014-09-01T00:00:00”: 1.26, “2015-09-01T00:00:00”: 1.31, “2016-09-01T00:00:00”: 1.14, “2017-09-01T00:00:00”: 1.05, “2018-09-01T00:00:00”: 1.08, “2019-09-01T00:00:00”: 1.07, “2020-09-01T00:00:00”: 1.28 }, “Recent”: { “TTM”: 1.09 }, “Category”: { “Value”: “Cash Flow” } } } }, “type”: “quote”, “id”: “123” } }

Many thx in advance!