如何从 API 访问获取的数据

Question

我想从 this API 获取股市数据并将其存储在一个变量中。我将需要一个循环来获取每个 day/entry 的价格，但那是稍后的事情。股票数据数组在 key:value 对象的 key 部分有语句，像这样：

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

如何在 Time Series (Daily) 中定位 1. open 的键？

这就是我到目前为止的全部内容。

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]);

Answer 1

您可以执行以下操作以从“时间序列（每日）”数据中提取所有“1.open”值。

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"]);

Answer 2

使用Object.keys(obj)您可以获得未知密钥的列表。使用这些键，您可以获取对象属性。

以下代码段可能对您有所帮助。

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;

如何从 API 访问获取的数据

How to access fetched data from an API

javascript

reactjs

api

axios

fetch