how to get correct JSON object from flickr API

Question

I used flickr photo search method to retrieve public photos. when I run it with jquery, it works fine, I get the json object in correct form.

{
    "photos": {
        "photo": [
            {
              .........
            }
        ]
    },
    "stat": "ok"
}

But when I use it with AngularJs, I got the same object with a prefix jsonFlickrApi

jsonFlickrApi({
    "photos": {
        "photo": [
            {
               ...... 
            }
        ]
    },
    "stat": "ok"
})

what I used in AngularJs is:

myApp.service('dataService', function($http) {
    delete $http.defaults.headers.common['X-Requested-With'];
    this.flickrPhotoSearch = function() {
        return $http({
            method: 'GET',
            url: 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c2fa93945&tags=india&format=json&callback=?',
            dataType: 'json'
         });
     }
});

Please tell me how can I convert the second JSON to the first one. Is there anything I can do in $http call or have to alter JSON object.

Burget

Answer 1

There was problem in the url. This Url works for me.

https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=3f807259749363aaa29c712fa93945&user_id=61495424@N00&format=json&nojsoncallback=?

Burget

Answer 2

You have to add nojsoncallback=1 to the url, like this

https://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=XXX&format=json&nojsoncallback=1

And that remove the jsonFlickrApi function on response.

Roadstead

Answer 3

The above answer which says to add nojsoncallback=1 is correct, but I'd like to provide more context and reasoning behind it.

If you take a look at the documentation (which is poorly formatted in my opinion): https://www.flickr.com/services/api/response.json.html and scroll all the way to the bottom you will find, tucked away:

Callback Function
If you just want the raw JSON, with no function wrapper, add the parameter nojsoncallback with a value of 1 to your request.

To define your own callback function name, add the parameter jsoncallback with your desired name as the value.

nojsoncallback=1    -> {...}
jsoncallback=wooYay -> wooYay({...});

The key part being: If you just want the raw JSON, with no function wrapper, add the parameter nojsoncallback with a value of 1 to your request

Therefore, add this to your request and it will remove jsonFlickrAPI wrapper that you are seeing in your response: nojsoncallback=1

Mailemailed

Answer 4

You are getting a JSONP response (notice the P) which is basically a function call with an argument that is the response you are expecting.

Easy solution for you: Create a function named jsonFlickrApi with a parameter response and you can do your handing in there.

At this point, I am not sure if you can define your function inside your service but try it. If not, you can define it outside.

Alternatively, try using $http.get function instead. Were you specifying the return accepted by the client in your jQuery original code?

EDIT

Try this setting the data type of the request using $http or $http.get without forgetting to specify the data property in the settings object.

$http({
    url: 'http://localhost:8080/example/teste',
    dataType: 'json',
    method: 'POST',
    data: '',
    headers: {
        "Content-Type": "application/json"
    }

}).success(function(response){
    $scope.response = response;
}).error(function(error){
    $scope.error = error;
});

Kneedeep