Uncaught SyntaxError: Unexpected token <, when calling angularJS $http.jsonp

Question

I'm trying to work with the IUCN Red List web services API (here's an example output). Unfortunately I haven't been able to find any documentation other than this one-off Gist. It looks as though the API is constructing an HTML document rather than returning a data object, which isn't something I've experienced in the past. I also notice that in the example there is no mention of a ?callback=JSON_CALLBACK in the URL, which I would expect when dealing with JSONP.

I've constructed an http request in AngularJS like so:

atRiskApp.controller('IucnController', ['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {
  $scope.iucn = $routeParams.iucn; // pulling a number from the URL: ex. 22718591

  $scope.getIUCN = function () {
    var iucnUrl = 'http://api.iucnredlist.org/details/' + $scope.iucn + '/0.js';

    $http.jsonp( url )
      .success( function (response) {
        console.log(response);
      })
      .error( function (response) {
        console.log(response);
      });
  };
}]);

Although the HTML document is being successfully passed to my app I'm getting the following error message: Uncaught SyntaxError: Unexpected token <

It seems like the app is expecting to get Javascript, and is instead getting an HTML document, which it apparently can't parse. I've tried adding a config object to the request based on the angular docs: $http.jsonp( {url: iucnUrl, responseType: 'text'} ) without any luck.

My question is, how do I work with the returned HTML document, or am I way off track here?

Response from the API is an HTML document with a javascript extension: API Response

score 1 · Answer 1 · edited May 23 '17 at 12:11

I diagonally looked over the website and its sitemap and found no reference to a public API. All the output is HTML, and it makes sense that json parse method jsonp will not be able to make sense of it. First < it encounters, it will fail (as is apparent).

First of all, I would contact the site admin to simply ask if there is an API that will yield you XML or json or some other object notation that's convenient to work with.

Then there's the scenario where his or her answer would be 'no':

Parsing HTML is not something to be taken lightly and certainly not something you would write yourself unless absolutely necessary.

Luckily, there are ways to get data from html using jQuery.parseHTML(), pure ('vanilla') javascript ways you can use from within AngularJS and full-blown HTML parsing libraries such as HTML Agility Pack(for use in .NET), all of which can get you to the heart of the data within the DOM nodes you're trying to poke at.

There are many other libraries that might serve you better, but these examples will give you a good starting point to canvas the landscape of HTML parsing. This will take some looking into, but it will be more than worth it.

This is the [only other thing](https://www.assembla.com/spaces/sis/wiki/Red_List_API?version=3) I was able to wrestle up. It seems like they re-wrote the output to create a more semantic response. I guess I'll have to track someone down within their organization; thanks. — Roy, Mar 17 '14 at 18:20

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

On the page you linked to in your comment , I found some potentially useful information under the heading API Index.

You can actually get JSON for all levels of taxonomy, including your example Aneides aeneus. However, this JSON doesn't include all of the data from the HTML version, so it's not as useful. Hopefully this helps a little.

API Index (excerpt)

It is also possible to retrieve the row(s) of the index corresponding to an individual species:

http://iucn-redlist-api.heroku.com/index/species/panthera-leo.json

You can use dashes for spaces, as a convenient replacement for the standard URL escape, %20.

The HTML format contains direct links to the species account pages. The CSV and JSON formats include a species_id column which can be used to construct species account URLs as follows:

http://iucn-redlist-api.heroku.com/details/species_id/0

To use the index JSON in Web pages directly, you may need JSONP padding; use the “.js” extension and add a “callback” parameter with the name of the function to use.

http://iucn-redlist-api.heroku.com/index/genus/Dioscorea.js?callback=show

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 17 '14 at 18:53

sighrobot

447
3
16

Success! Not sure how I missed that section. I updated the URL to hit the heroku app and added `?callback=JSON_CALLBACK`. The API is now returning an object containing the HTML document, which doesn't look like much fun to work with, but it's an improvement! Example URL: `'http://iucn-redlist-api.heroku.com/details/' + $routeParams.iucn + '/0.js?callback=JSON_CALLBACK'` – Roy Mar 17 '14 at 19:15
That's because `/details/1282/0` returns HTML whereas `/index/species/aneides-aeneus.js` returns JSON. Is there any way you can use the actual names instead of the species IDs? Unfortunately it doesn't look like you can get JSON unless you do it that way. – sighrobot Mar 17 '14 at 20:57
A species can have any number of different common names so using an ID is really the only way to guarantee you get data on the species you intended. I spoke with one of IUCN's IT professionals about a more modern api, but I'm waiting to hear back. – Roy Mar 18 '14 at 11:37

Uncaught SyntaxError: Unexpected token <, when calling angularJS $http.jsonp

2 Answers2

API Index (excerpt)