0

I fetched data from this API and I would like to store certain things into State or a variable (as an array).

  var baseUrl = `https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=IBM&apikey=https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=IBM&apikey=<api_key>`;

  const [chart, setChart] = useState();

  useEffect(() => {

      axios.get(baseUrl).then(res => {
          setChart(res.data);
          console.log(res.data);
      });

  }, [baseUrl]);

  useEffect(()=>{}, [chart]);

At this point, chart (state) has all the data stored ( 100 entries ).

    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "IBM",
        "3. Last Refreshed": "2022-05-06",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2022-05-06": {
            "1. open": "135.4700",
            "2. high": "137.9900",
            "3. low": "135.4700",
            "4. close": "137.6700",
            "5. volume": "7306396"
        },
        "2022-05-05": {
            "1. open": "136.4600",
            "2. high": "137.2600",
            "3. low": "134.7600",
            "4. close": "135.9200",
            "5. volume": "5957434"
        },

Next, I would like to access "Time Series (Daily)" and get the "1. open" number for each day.

I tried to manually access that data like so ( just to see if it's working )

const getNumber = Object.keys(chart['Time Series (Daily)']["2022-05-06"]["1. open"]);

console.log("today's 1.open number is: " + getNumber);

but no.. react is very angry at me giving me an error saying: "TypeError: Cannot read properties of undefined (reading 'Time Series (Daily)')"

I also tried without Object.keys but it's giving me the same error unfortunately. What's the problem ? How can I access that data and store it into state/let/const.

Andy
  • 61,948
  • 13
  • 68
  • 95
Matt Szumilo
  • 43
  • 7
  • [`Object.keys`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) returns an array of enumerable keys of the passed object. I do not see any use of it in your current code. To get the value `chart['Time Series (Daily)']["2022-05-06"]["1. open"]` would be used. Also your error indicates that `chart` is `undefined` at the point your are trying to access it. – Lain May 10 '22 at 09:37
  • Hi Matt, just a quick note, don't add your API Keys to public places... someone may get a hold of it and abuse it – Craig Wayne May 10 '22 at 09:43
  • console.log(Object.values(res['Time Series (Daily)']).map( i => i['1. open'])); – Craig Wayne May 10 '22 at 09:53
  • @CraigWayne I was able to console log all entries using your and Georgy's answers.. instead of res I ran chart?. and boom, it worked.. I appreciate you taking time to help - I've been trying to figure this out for a few days.. Thank you Craig wish you all the best – Matt Szumilo May 10 '22 at 10:00

1 Answers1

0

Actually you don't need Object.keys. And the error you are getting is because you are calling chart before you assign it by calling setChart. You should check if chart is not undefined, and it's better to check all properties you are accessing.

In that case for the first render you will get undefined (because you don't get data from the API yet) and then you will get the correct result.

const getNumber = chart?.['Time Series (Daily)']?.["2022-05-06"]?.["1. open"]
Georgy
  • 1,879
  • 2
  • 9
  • 14