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