Cannot use Angular to show json from flickr

Question

I have a problem when I try to show the data that I receive. Here is my code:

$http({ method:'get', format:'json', url:'http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=MyAPI&per_page=30&format=json', }).success(function(data, status, headers, config){ $scope.photoID = data; alert($scope.photoID) }) 

In the Json file, I get:

 jsonFlickrApi( { photos: { page: 1, pages: 34, perpage: 30, total: 1000, photo: [ { id: "11480313795", owner: " 80249365@N00 ", secret: "d4950d1c38", server: "5482", farm: 6, title: "5DM38945", ispublic: 1, isfriend: 0, isfamily: 0 },..... 

And in this situation, he can show the entire json file in a warning window. However, when I want to get some specific data, such as a page or photo id, it just shows undefined or even an error in the console.

 $http({ method:'get', dataType:'jsonp', url:'http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=MyAPI&per_page=30&format=json&jsoncallback=?', }).success(function(data, status, headers, config){ $scope.photoID = data.photos.page; alert($scope.photoID); }) 

I can ajax the same json file with jQuery, so I have no idea what happened. Can anybody help me?

Answer 1

The $http.get method is $http.get . The flickr api you use returns the JSONP format. This is what seems to make your code unusable. Check the original answer for the correct way to handle this in this case.

Previous answer:

From $ http docs, your call should contain a substring of JSON_CALLBACK.

Is absent.

The correct URL should be:

 http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=MyAPI&per_page=30&format=json&jsoncallback=JSON_CALLBACK 

EDIT:

Here is plunkr, with a test case

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

the code:

 $http.jsonp("http://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=KEY&per_page=30&format=json&jsoncallback=JSON_CALLBACK") .success(function(data) { $scope.data = data.photos; })