How to access fetched data from an API-CodePudding

I would like to fetch stock market data from this API and store it in a variable. I will need a loop to get prices for every day/entry, but that's later. The array of stock data has sentences in the key part of the key:value object, like so:

"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"
    },
}

How can I target the key of 1. open inside of Time Series (Daily)?

This is all I have so far.

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=JX0BM5MCRRDMZBSE`;
let chartXValues = []; // Date
let chartYValues = []; //Stock Price

useEffect(() => {

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


}, [baseUrl]);

CodePudding user response：

With Object.keys(obj) you can get list of unknown key. With those key you can fetch object properties.

below snippet may help you.

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

function App(props) {

    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=JX0BM5MCRRDMZBSE`;
    let chartXValues = []; // Date
    let chartYValues = []; //Stock Price

    const [chart, setChart] = useState();

    useEffect(() => {

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

    }, [baseUrl]);

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

    return (
        <div>
            {   chart &&
                Object.keys(chart['Time Series (Daily)']).map((k, i1) => {
                    return (<div key={i1}>
                        <h3>{k}</h3>
                        {
                            Object.keys(chart['Time Series (Daily)'][k]).map((l, i2) => {
                                return (<div key={i2}>{chart['Time Series (Daily)'][k][l]}</div>)
                            })
                        }
                    </div>)
                })
            }
        </div>

    );
}

export default App;

CodePudding user response：

You can could do the following to extract all the "1. open" values from the "Time Series (Daily)" data.

const response = {
    "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"
        },
        "2022-05-04": {
            "1. open": "132.8700",
            "2. high": "137.8700",
            "3. low": "132.1400",
            "4. close": "137.4000",
            "5. volume": "5913705"
        },
    }
}

const openTs = Object.values(response["Time Series (Daily)"]).map(ts => ts["1. open"]);