Angularjs Flickr API SyntaxError: Unexpected token when using nojsoncallback=1

Question

I have an angularjs app to call a flickr api.

I want the data in RAW json format with no function wrapper and as per the docs , applying &nojsoncallback=1 .

However I'm getting the following console error. SyntaxError: Unexpected token '

This error only appears when applying &nojsoncallback=1 to the url. However I want RAW json with no wrapper.

If I don't apply the above to the url and simple use https://api.flickr.com/services/feeds/photos_public.gne?tags=trees&format=json I get no error, but when console logging out the typeof I get 'string' displayed.

I then try parsing this into JSON and get another error because it has a wrapped. Hence why I want RAW.

Below is the code I have so far. Any help - much appreciated.

JS

(function(){
'use strict';

    var app = angular.module('flickrApp', []);

    app.controller('FlickrFeedController', ['$http', '$scope', function($http, $scope){

        // grab the flickr api
        var response = $http.get('http://crossorigin.me/https://api.flickr.com/services/feeds/photos_public.gne?tags=trees&format=json&nojsoncallback=1');

        // on success
        response.success(function(data){

            // console logging out the typeof gives 'string'
            console.log(typeof(data));

            // since it's a string I would then want to convert it into a json object
            // but I need to sort the current error out first
            // data = JSON.parse(data);
            // console.log(typeof(data));

        });
    }]);

})();

EDIT : This is a work around removing &nojsoncallback=1 from the url (removing the console error) and since the data comes back as a string having to replace characters, then parse. Not great but I get the required output (object) and thought I'd add it up here for others to view.

JS

(function(){
'use strict';

    var app = angular.module('flickrApp', []);

    app.controller('FlickrFeedController', ['$http', '$scope', function($http, $scope){

        // grab the flickr api
        var response = $http.get('http://crossorigin.me/https://api.flickr.com/services/feeds/photos_public.gne?tags=trees&format=json');

        // on success
        response.success(function(data){

            // typeOf is 'string' even though format=json is specified in the url
            //console.log(typeof(data));
            //console.log(data);

            // work-around since data is returned as a string
            data = data.replace('jsonFlickrFeed(', '');
            data = data.replace('})', '}');
            data = data.replace(/\\'/g, "'");

            // parse the data
            data = JSON.parse(data);

            // typeOf is 'object'
            console.log(data.items);
            console.log(typeof(data));

        });
    }]);

})();

Answer 1

Generate angular resource to call the api with format: {'json', jsoncallback: 'JSON_CALLBACK'} . Check complete solution here - http://plnkr.co/edit/Lxxkb9?p=preview

var app = angular.module('flickrApp', ['ngResource']);

app.factory('Flickr', function($resource, $q) {
  var photosPublic = $resource('http://crossorigin.me/https://api.flickr.com/services/feeds/photos_public.gne?tags=trees&format=json', 
      { format: 'json', jsoncallback: 'JSON_CALLBACK' }, 
      { 'load': { 'method': 'JSONP' } });
  return {
    get: function() {
      var q = $q.defer();
      photosPublic.load(function(resp) {
        q.resolve(resp);
        console.log(resp.items);
      })
      return q.promise;
    }
  }
});
app.controller('FlickrCtrl', function($scope, Flickr) {
Flickr.get();
});