CODEWITHSUNDEEP
ajaxangularjshttpjsonp
Roy
Roy

Reputation: 1518

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

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

Upvotes: 1

Views: 6738

Answers (2)

sighrobot
sighrobot

Reputation: 448

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

Upvotes: 1

Wim Ombelets
Wim Ombelets

Reputation: 5265

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.

Upvotes: 1

Related Questions