Display API request results in HTML page using only js
Question
I'm kinda new to js and API,
I have written a little code that is suppose to go ask 2 websites some data, then I only take a part of the result and add it to my html page.
I'm trying to get it work with the first website as it will be easy to make it work on the second one when I'll have the first.
I want to use only js and not php or other languages.
It is not working for the moment...
So here is my js
Ok if you come here only now,
My code has been updated using the 2 answers below of Justin and Aashah, the issue now is that the browser says that in order to fetch with cors, I need a http or https, and says that there is an issue with [object%20Object], so still no data showing up, if someone has a solution, please help us :)
var urlbitfinex = "https://api.bitfinex.com/v1";
var urlkraken = "https://api.kraken.com/0/public/Ticker?pair=";
var resultBitfinex;
//request bitfinex price
request.get(urlbitfinex + "/pubticker/btcusd",
resultBitfinex = function(error, response, body) {
console.log(body)
return body;
});
//request kraken price
request.get(urlkraken + "xbteur",
function(error, response, body) {
console.log(body);
});
//Pushing the result to the html
var price_USD = document.getElementById('price-usd');
var USDPrice = '<p>USDEUR Price:' + resultBitfinex.ask '</p>';
price_USD.innerHTML += USDPrice;
And my html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="price-usd">
</div>
<script src="getPrices.js"></script>
</body>
</html>
2 answers
solution1
1 2017-10-16 13:09:31
You have to handle UI changes in the callback:
fetch({ url: urlkraken + "/pubticker/btcusd", cors: true })
.then(res => res.json())
.then(res => {
const price_USD = document.querySelector('#price-usd');
const USDPrice = '<p>USDEUR Price:' + res.ask + '</p>';
price_USD.innerHTML += USDPrice;
})
.catch(err => console.log(err));
solution2
1 ACCPTED 2017-10-16 13:11:07
You aren't really doing anything with the response.
If you don't have to support IE you can use fetch . Here's an example taken from: How to get the response of XMLHttpRequest?
var url = "https://stackoverflow.com"; // Change this to your URL
fetch(url)
.then(function(response) {
if(response.ok) { // Check if response went through
response.json().then(function(data) {
var price_USD = document.getElementById('price-usd');
var USDPrice = '<p>USDEUR Price:' + data.something + '</p>';
price_USD.innerHTML += USDPrice;
});
} else { // Response wasn't ok. Check dev tools
console.log("response failed?");
}
});
More about Fetch here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.