Displaying api response in javascript

Question

I'm making a dashboard with some coin values (in this case, bitcoin (BTC) and NLG.) I am getting the current value of BTC from bitstamp, I want to get the NLG to BTC value from Bittrex. I made the following page: (you can also find it here: (I'll remove it at some point) http://coin.hmrt.nl/)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Coin.hmrt.nl</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Coin.hmrt.nl</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#NLG-BTC">NLG-BTC</a></li>
            <li><a href="#NLG">NLG</a></li>
            <li><a href="#BTC">BTC</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container" id="NLG-BTC">
      <section>
      <h2>NLG-BTC</h2>
        <div class="row row-eq-height">
          <div class = col-md-4>
            <h4>Huidige waarden</h4>
            <p class="BTC_EUR">BTC(&euro;): </p>
            <p class="greeting-content">NLG(&euro;): </p>
            <p class="NLG_BTC">NLG(BTC): </p>
          </div>

          <div class = col-md-4>
            <p class="last-bid">The API result is </p>
            <p>1</p>
          </div>

          <div class = col-md-4>
            <img src="grafiek.jpg">
          </div>
        </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="hello.js"></script>
    <script src="get_values.js"></script>
    <script src="get_values2.js"></script>
  </body>
</html>

For now I split the javascript in two because the bittrex api call does not work, it keeps the bitstamp one from loading its value. These are the javascripts, the first one works.

$(document).ready(function() {
  $.ajax({
    url: "https://www.bitstamp.net/api/v2/ticker/btceur"
  }).then(function(response_BTC_EUR) {
    var BTC_EUR = response_BTC_EUR.last;
    $('.BTC_EUR').append(BTC_EUR);

    url: "http://rest-service.guides.spring.io/greeting"
}).then(function(data) {
   $('.greeting-id').append(data.id);
   $('.greeting-content').append(data.content);
  });
});

and this one does not give an output:

$(document).ready(function() {
  $.ajax({
    url: "https://bittrex.com/api/v1.1/public/getticker?market=BTC-NLG"
  }).then(function(response_NLG_BTC) {
    console.log(response_NLG_BTC)
    var NLG_BTC = response_NLG_BTC
    $('.NLG_BTC').append(NLG_BTC.result);
  });
});

In Python I have all APIs working, this code for example works:

requests.get('https://bittrex.com/api/v1.1/public/getticker?market=BTC-NLG').json()

It produces:

{'message': '',
 'result': {'Ask': 1.1e-05, 'Bid': 1.099e-05, 'Last': 1.099e-05},
 'success': True}

What am I missing? I also find it quite difficult or actually impossible to debug because I have no feedback anywhere on what goes wrong. Any ideas?

"_I also find it quite difficult or actually impossible to debug because I have no feedback anywhere_" -> Check the [developer tools](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) and the console will tell you the [problem](https://en.wikipedia.org/wiki/Same-origin_policy) — Andreas, Sep 27 '16 at 05:58

score 1 · Answer 1 · answered Sep 27 '16 at 05:59

Javascript might not be your best debugging tool here. In Firefox and Chrome, you can monitor all requests sent and received. This would let you see all of the request headers, as well as what exactly was sent back by the server (if anything).

In Firefox, press Ctrl-Shft-K, then click the Network tab, then load your page as usual. Watch for the request you want. When it appears, click it, and all the information will be shown in a smaller window to the right.

My guess is, something is going wrong with the query string (such as the '?' being escaped automatically). This would be shown in the "Params" tab.

Ah this works, it's as CasperSL says: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bittrex.com/api/v1.1/public/getticker?market=BTC-NLG. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Strange, the other do work so it's something they block at Bittrex then. But it's easy to work around with using some Python and loading the values stored in files... — Freek, Sep 27 '16 at 06:34

score 1 · Answer 2 · answered Sep 27 '16 at 06:22

1

I think you'r trying to do XMLHttpRequest to a different domain than your page is on. so the browser is blocking it as it usually allows a request in the same origin for security reasons.

This might be help to solve issue https://www.codeschool.com/discuss/t/how-to-solve-no-access-control-allow-origin-header-is-present-on-the-requested-resource-origin-null-is-therefore-not-allowed-access-in-angular-js/28989

answered Sep 27 '16 at 06:22

Casper

1,469
10
19

I don't really see a solution offered there but I'm quite a noob on js. Ill report back when I get things working. – Freek Sep 27 '16 at 06:38
So why would the browser block that specific request and not the other 2? – Freek Sep 27 '16 at 15:32
it may be different domain https/http i think you are trying to run this on local – Casper Sep 28 '16 at 04:30
I think it's a setting at Bittrex. t also doesn't work with a proper domain name on server other than my local machine. – Freek Sep 28 '16 at 10:44
sometime, refer their document if they have one it is the better way – Casper Sep 29 '16 at 03:30

score 0 · Answer 3 · answered Sep 27 '16 at 05:56

Try adding a catch clause on your request to see if you get an error:

 $(document).ready(function() {
      $.ajax({
        url: "https://bittrex.com/api/v1.1/public/getticker?market=BTC-NLG"
      }).then(function(response_NLG_BTC) {
        console.log(response_NLG_BTC)
        var NLG_BTC = response_NLG_BTC
        $('.NLG_BTC').append(NLG_BTC.result);
      })
      .catch(function(err) {
        console.error(err);
      })
    });

Displaying api response in javascript

3 Answers3