Can't use Angular to show json from flickr

Question

I have issue when try to show the data I get. 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)

})

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 it can show the whole json file in alert window. However when I want to get some specific data like page or photo id,it just shows undefined or even 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's wrong. Can anyone help me please?

Answer 1

You are using the $http.get method. The flickr api you are using returns a JSONP format though. This is what seems to make your code not work. Check out my original answer for the correct way to handle this in this case.

Previous Answer:

From the $http docs, your call has to contain a JSON_CALLBACK substring.

Yours is missing.

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 a plunkr, with a test case

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

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;

})