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>

mmm, seems vars not declared like "entry" and to request that isnt used for nothing — Álvaro Touzón, Oct 16 '17 at 12:57
What do you mean by "and to request that isnt used for nothing" ? — Ilan, Oct 16 '17 at 13:04
Yes its not clarity , you're using to request for nothing, there is not used for anything. — Álvaro Touzón, Oct 16 '17 at 13:04
I'm sorry but there are data in the request https://api.bitfinex.com/v1/pubticker/btcusd — Ilan, Oct 16 '17 at 13:06
`'Access-Control-Allow-Origin'` is something you cannot fix on the client side. The owner of the server needs to add that to the server side of their application. The first request doesn't work because the owner of the server needs the server to allow everyone to access it. I tried to second request and that one does work. See https://plnkr.co/edit/BEdYpVhJGCXyTPnAP482?p=preview and just change the urls — Jimenemex, Oct 16 '17 at 14:50
Thanks, interesting, they say it is a public api but won't let a website access it, its weird, thanks a lot — Ilan, Oct 16 '17 at 15:34

aashah7 · Answer 1 · 2017-10-16T13:38:19.667

1

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

edited Oct 16 '17 at 13:38

answered Oct 16 '17 at 13:09

aashah7

2,075
1
17
24

thank you, is it displaying something in your browser, because it stays blank in mine – Ilan Oct 16 '17 at 13:13
Where does the `request` variable come from? It does not seem to be defined in the code provided. Thanks. – aashah7 Oct 16 '17 at 13:18
:p haven't defined it actually, I thought it was the syntax that I needed to use for this kind of thing – Ilan Oct 16 '17 at 13:22
OK, so I updated my answer to use `fetch`, which is natively built into newer versions of Javascript. – aashah7 Oct 16 '17 at 13:27
Oh I see where the error comes from, I get this error : Failed to load https://api.bitfinex.com/v1/pubticker/btcusd: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. – Ilan Oct 16 '17 at 13:32
Thanks ! He tells me he can't load [object%20Object] at line 1, it's beyond my level in programming I'm sorry... – Ilan Oct 16 '17 at 13:49
What code is at line 1, or whichever line it is referring to? – aashah7 Oct 16 '17 at 13:59
He says : getPrices.js:3 Fetch API cannot load file:///Users/.../[object%20Object]. URL scheme must be "http" or "https" for CORS request. Failed to fetch at getPrices.js:3 which is fetch({ url: url + "/pubticker/btcusd", cors: true }) – Ilan Oct 16 '17 at 14:05
Do you change `url` to `urlbitfinex`? – aashah7 Oct 16 '17 at 14:10
var url = "https://api.bitfinex.com/v1" fetch({ url: url + "/pubticker/btcusd", cors: true }) .then(res => res.json()) .then(res => { const price_USD = document.querySelector('#price-usd'); const USDPrice = '
USDEUR Price:' + res.ask + '
'; price_USD.innerHTML += USDPrice; }) .catch(err => console.log(err)); Maybe I need to load this from an online version of my site. The https is here but don't show up in comments – Ilan Oct 16 '17 at 14:12

Jimenemex · Accepted Answer · 2017-10-16T13:51:51.007

1

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.

edited Oct 16 '17 at 13:51

answered Oct 16 '17 at 13:11

Jimenemex

3,104
3
24
56

thank you, I've tried your answer but it doesn't show the data, am I missing something ? – Ilan Oct 16 '17 at 13:16
Did you change `data.something` and the `url` to meet your needs? – Jimenemex Oct 16 '17 at 13:23
Yes indeed, I wrote my url and response.ask – Ilan Oct 16 '17 at 13:26
observe the structure of data in `data`. Meaning do a `console.log(data);` and look at the results in the dev tools. I'm not entirely sure how the structure of the data is going to look like. You have to change `data.something` to `data.[your requested data]` – Jimenemex Oct 16 '17 at 13:29
Thanks it seems to work but it says there is an unexpected string at the line var USDPrice = '
USDEUR Price:' + data.something'
'; – Ilan Oct 16 '17 at 13:51
add a `+` between `data.something` and `` – Jimenemex Oct 16 '17 at 13:51
Cool ! Thanks, I still get a problem with fetching, but I think we cannot do much more... He says there is an issue with [object%20Object], because I added the "cors, true" thank you for your help ! – Ilan Oct 16 '17 at 13:56

Display API request results in HTML page using only js

2 Answers2

Linked