问题
I am trying to loop through the JSON from my API call and plot each high trade price in my react app (the end goal will be to create a chart). The issue is, I would need to know the exact timestamp string beforehand, because the API isn't structured numerically. Here is my code (see the console log). I am currently testing the proper endpoint BEFORE creating a loop, which is why you don't see one.
If you are curious, the this.state.stock is AMD, which I am using to test it. Eventually it will be the user input. How am I supposed to loop through?
componentDidMount() {
axios
.get(`https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${this.state.stock}&interval=5min&apikey=J6ED0QFWG3T1KLTD`)
.then((response) => {
this.setState({
dailyQuote: response.data
})
console.log("daily quote",this.state.dailyQuote['Time Series (5min)']['2019-06-27 14:15:00']['2. high'])
})
}
Here is a sample of the API call data
{
"Meta Data": {
"1. Information": "Intraday (5min) open, high, low, close prices and volume",
"2. Symbol": "amd",
"3. Last Refreshed": "2019-06-28 16:00:00",
"4. Interval": "5min",
"5. Output Size": "Compact",
"6. Time Zone": "US/Eastern"
},
"Time Series (5min)": {
"2019-06-28 16:00:00": {
"1. open": "30.3900",
"2. high": "30.4000",
"3. low": "30.3300",
"4. close": "30.3700",
"5. volume": "2242133"
},
"2019-06-28 15:55:00": {
"1. open": "30.3700",
"2. high": "30.4400",
"3. low": "30.3601",
"4. close": "30.3900",
"5. volume": "1294256"
},
"2019-06-28 15:50:00": {
"1. open": "30.4350",
"2. high": "30.4500",
"3. low": "30.3500",
"4. close": "30.3700",
"5. volume": "1265203"
},
"2019-06-28 15:45:00": {
"1. open": "30.4750",
"2. high": "30.4750",
"3. low": "30.4300",
"4. close": "30.4350",
"5. volume": "664693"
},
"2019-06-28 15:40:00": {
"1. open": "30.4850",
"2. high": "30.4900",
"3. low": "30.4550",
"4. close": "30.4700",
"5. volume": "539474"
},
"2019-06-28 15:35:00": {
"1. open": "30.4750",
"2. high": "30.5050",
"3. low": "30.4500",
"4. close": "30.4900",
"5. volume": "685410"
},
"2019-06-28 15:30:00": {
"1. open": "30.5100",
"2. high": "30.5200",
"3. low": "30.4600",
"4. close": "30.4800",
"5. volume": "376771"
},
"2019-06-28 15:25:00": {
"1. open": "30.5400",
"2. high": "30.5600",
"3. low": "30.5000",
"4. close": "30.5101",
"5. volume": "288554"
},
"2019-06-28 15:20:00": {
"1. open": "30.5600",
"2. high": "30.5600",
"3. low": "30.5200",
"4. close": "30.5350",
"5. volume": "218143"
},
"2019-06-28 15:15:00": {
"1. open": "30.5703",
"2. high": "30.5800",
"3. low": "30.5400",
"4. close": "30.5557",
"5. volume": "281558"
},
"2019-06-28 15:10:00": {
"1. open": "30.5700",
"2. high": "30.5850",
"3. low": "30.5500",
"4. close": "30.5750",
"5. volume": "290714"
},
"2019-06-28 15:05:00": {
"1. open": "30.5803",
"2. high": "30.6100",
"3. low": "30.5750",
"4. close": "30.5750",
"5. volume": "169868"
},
"2019-06-28 15:00:00": {
"1. open": "30.6050",
"2. high": "30.6100",
"3. low": "30.5800",
"4. close": "30.5850",
"5. volume": "186744"
},
"2019-06-28 14:55:00": {
"1. open": "30.5650",
"2. high": "30.6100",
"3. low": "30.5500",
"4. close": "30.6050",
"5. volume": "378489"
},
"2019-06-28 14:50:00": {
"1. open": "30.5700",
"2. high": "30.5800",
"3. low": "30.5500",
"4. close": "30.5650",
"5. volume": "247525"
},
}
回答1:
If you are just looking to loop through the data, use something like this:
var strProp, strValue;
for (strProp in someArray) {
console.log(`Name: ${strProp}; Value: ${someArray[strProp}\n`;
}
That will show you the names. You can also do something like this to actually use them in code because of index signatures:
var data = { "meta" : "", "series" : ""};
for (var strProp in apiResults) {
if (strProp == "Meta Data") {
data["meta"] = apiResults[strProp];
} else if (strProp == "Time Series (5min)") {
data["series"] = apiResults[strProp];
} else {
console.error(`Cannot read data from API call! Returns: ${apiResults}`);
}
You can then read from data["series"] in the same way.
回答2:
Welcome to Stack Overflow.
The JSON data format isn't in the best format for easy charting, you may want to convert it to a more suitable format first by iterating over the date/time keys of the object. They are in descending order, so you will also need to reverse the entries.
Here is some sample code:
const rawSeries = response.data['Time Series (5min)']
const series = Object.keys(rawSeries).reverse().map(timestamp => {
return {timestamp, value: rawSeries[timstamp]['2. high']}
})
// series will now contain an array of objects like this:
// [
// {timestamp: "2019-06-28 14:50:00", value: "30.5000"},
// {timestamp: "2019-06-28 14:55:00", value: "30.6100"},
// ...
//]
If you just want an array of data points without labels, you can do this:
const rawSeries = response.data['Time Series (5min)']
const series = Object.keys(rawSeries).reverse().map(timestamp => {
return rawSeries[timstamp]['2. high']
})
// series will now contain an array of values like this:
// ["30.5000","30.6100", ... ]
来源：https://stackoverflow.com/questions/56826647/how-to-loop-though-alpha-vantage-timestamps