I am learning to use an API and I need some help.
I chose yahoo finance API and I'm trying to interpret the results. For this, I want to just access some of the data and display it on screen. I don't really know how I should do this. What is the correct method?
var configuration = {
method: "GET",
headers: {
"x-rapidapi-host": "yh-finance.p.rapidapi.com",
"x-rapidapi-key": "9ac5b9a91dmshc51815b4efc8942p149234jsnb64a2f32b56d",
},
};
var url =
"https://yh-finance.p.rapidapi.com/stock/v2/get-chart?interval=1d&symbol=AMRN&range=1d®ion=US";
var name = document.querySelector("stock-name");
var price = document.querySelector("stock-price");
var high = document.querySelector("stock-high");
var currency = document.querySelector("stock-currency");
fetch(url, configuration)
.then(function (response) {
if (response.status !== 200) {
console.log(
"Looks like there was a problem. Status Code: " + response.status
);
return;
}
// Examine the text in the response
response.json().then(function (data) {
console.log(data);
displayData(data);
});
})
.catch(function (err) {
console.log("Fetch Error :-S", err);
});
//displaying some data from API
function displayData(stockData) {
name.innerHTML = "Stock name:" + Object.keys(stockData.meta.symbol);
price.innetHTML = "Stock's price:" + stockData.priceHint;
high.innerHTML = "Stock's high:" + stockData.indicators.quote[0].high[0];
currency.innerHTML = "Stock's currecy:" + stockData.meta.currency;
} </div>
<div><h3 id = "stock-name"></h3>
<h3 id = "stock-price"></h3>
<h3 id = "stock-high"></h3>
<h3 id = "stock-currency"></h3>
</div>I am not a fan of Jquery.
I tried accessing the data from API in the console with:
console.log(Object.keys(stockData.chart.result[0].meta));
console.log(Object.values(stockData.chart.result[0].meta));
to see if I can access it like this, but I can't access one element, like meta[x], only the whole array.
Does anyone know where can I learn more about manipulating data from API? I couldn't find any good information...
{
"chart": {
"result": [
{
"meta": {
"currency": "USD",
"symbol": "AMRN",
"exchangeName": "NGM",
"instrumentType": "EQUITY",
"firstTradeDate": 733674600,
"regularMarketTime": 1644440402,
"gmtoffset": -18000,
"timezone": "EST",
"exchangeTimezoneName": "America/New_York",
"regularMarketPrice": 3.69,
"chartPreviousClose": 3.53,
"priceHint": 4,
"currentTradingPeriod": {
"pre": {
"timezone": "EST",
"end": 1644503400,
"start": 1644483600,
"gmtoffset": -18000
},
"regular": {
"timezone": "EST",
"end": 1644526800,
"start": 1644503400,
"gmtoffset": -18000
},
"post": {
"timezone": "EST",
"end": 1644541200,
"start": 1644526800,
"gmtoffset": -18000
}
},
"dataGranularity": "1d",
"range": "1d",
"validRanges": [
"1d",
"5d",
"1mo",
"3mo",
"6mo",
"1y",
"2y",
"5y",
"10y",
"ytd",
"max"
]
},
"timestamp": [
1644417000,
1644440402
],
"indicators": {
"quote": [
{
"open": [
3.559999942779541,
3.559999942779541
],
"close": [
3.690000057220459,
3.690000057220459
],
"high": [
3.740000009536743,
3.740000009536743
],
"volume": [
2084300,
2089304
],
"low": [
3.559999942779541,
3.559999942779541
]
}
],
"adjclose": [
{
"adjclose": [
3.690000057220459,
3.690000057220459
]
}
]
}
}
],
"error": null
}
}
Sample response I got running your code
const metaData = stockData.chart.result[0].meta
metaData.currency //'USD'
metaData.regularMarketPrice //3.69
If you know the key you can directly get the value from it.
you can simple make following changes in you JS file :
const configuration = {
method: "GET",
headers: {
"x-rapidapi-host": "yh-finance.p.rapidapi.com",
"x-rapidapi-key": "9ac5b9a91dmshc51815b4efc8942p149234jsnb64a2f32b56d",
},
};
const url =
"https://yh-finance.p.rapidapi.com/stock/v2/get-chart?interval=1d&symbol=AMRN&range=1d®ion=US";
const name = document.querySelector("#stock-name");
const price = document.querySelector("#stock-price");
const high = document.querySelector("#stock-high");
const currency = document.querySelector("#stock-currency");
fetch(url, configuration)
.then(function (response) {
if (response.status !== 200) {
console.log(
"Looks like there was a problem. Status Code: " + response.status
);
return;
}
// Examine the text in the response
response.json().then(function (data) {
console.log(data);
displayData(data);
});
})
.catch(function (err) {
console.log("Fetch Error :-S", err);
});
//displaying some data from API
function displayData(stockData) {
let metadata = stockData.chart.result[0].meta;
let indicators = stockData.chart.result[0].indicators;
name.innerText = "Stock name:" + metadata.symbol;
price.innerText = "Stock's price:" + metadata.priceHint;
high.innerText = "Stock's high:" + indicators.quote[0].high[0];
currency.innerText = "Stock's currecy:" + metadata.currency;
}
here you can choose between innerHTML and innerText, as you just wanted to inject the values I have used the innerText.