AngularJS Flickr API 'Uncaught SyntaxError: Unexpected token <'

Question

I'm trying to get public photos from Flickr using AngularJS and getting this console error:

Uncaught SyntaxError: Unexpected token <

Here's my code:

  var app = angular.module('plunker', ['ng', 'ngResource']);
  app.controller('MainCtrl', function($scope, $http) {
      $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?&callback=JSON_CALLBACK').then(function (data) {
        $scope.data = data;
        console.log(data);
      });
  });

Here's my Plunker:

http://plnkr.co/edit/vB9BJDh6B8DtSFlod1F2?p=preview

How can I prevent this error from occurring?

Answer 1

The url of the flickr API you are using returns XML.

Add format=json in the request url. Also, replace callback=JSON_CALLBACK with jsoncallback=JSON_CALLBACK.

To sum up, query like that:

$http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=JSON_CALLBACK').then(function (data) {
    $scope.data = data;
    console.log(data);
});

See updated plunker