0

My function:

function getMarketData_() {
      $http({
        method: 'JSONP',
        url: 'https://api.coinmarketcap.com/v2/ticker/',
      }).then(function(response) {
        console.log('ran');
      }).catch(function(response) {
        console.log('Error');
      });
    }

The Error:

Uncaught SyntaxError: Unexpected token :

The location of the error in the returned JSON:

enter image description here

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Joe Berthelot
  • 725
  • 4
  • 16
  • 33

1 Answers1

0

The API doesn't support JSONP.

To test click: https://api.coinmarketcap.com/v2/ticker/?callback=test

An API that supports JSONP would send back something like:

test({
    "data": {
        "1": {
            "id": 1, 
            "name": "Bitcoin", 
            "symbol": "BTC", 
            "website_slug": "bitcoin", 
            "rank": 1, 
            "circulating_supply": 17095362.0, 
            "total_supply": 17095362.0, 
            "max_supply": 21000000.0, 
            "quotes": {
                "USD": {
                    "price": 6530.3, 
                    "volume_24h": 4015800000.0, 
                    "market_cap": 111637842469.0, 
                    "percent_change_1h": -0.66, 
                    "percent_change_24h": -2.31, 
                    "percent_change_7d": -14.6
                }
            }, 
            "last_updated": 1529097276
        }
    }
})

For more information, see Wikipedia - JSONP

See also Angular 1.6.3 is not allowing a JSONP request that was allowed in 1.5.8

The API supports CORS.

To test use:

https://www.test-cors.org/#?client_method=GET&client_credentials=false&server_url=https%3A%2F%2Fapi.coinmarketcap.com%2Fv2%2Fticker%2F&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote

This question typically arises when a user attempts to use $http.get and gets:

XMLHttpRequest cannot load https://www.[website].com/ No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4300' is therefore not allowed access.

Then someone suggests $http.jsonp as the workaround. This only works if the API supports JSONP.

For more information, see

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • The API has a method to structure the data as an array, do you think this could be a workaround? https://api.coinmarketcap.com/v2/ticker/?start=101&limit=10&sort=id&structure=array – Joe Berthelot Jun 15 '18 at 22:11
  • The array structure is nice but it still is not JSONP because the required padding is not added. If the API doesn't support JSONP there is no workaround that will make `$http.jsonp` work. Use `$http.get` from an `https` origin or use a CORS proxy. – georgeawg Jun 15 '18 at 22:24
  • Yeah that's what I figured. Thanks for the insight. I've been also trying to use $http.get but with that method I just get the CORS error: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.". Note that I'm running this from localhost. When I run the exact same code from a site like Codepen, it works fine. – Joe Berthelot Jun 15 '18 at 22:50
  • Codepen works because their origin is `https`. Your localhost doesn't work because the origin is `http`. Modern browsers block `http` to `https` cross origin requests. – georgeawg Jun 15 '18 at 22:56