使用 Angular 从 API 获取 JSON 数据

Question

I am trying to get some JSON data by the following address http://www.soe.gr/photos.txt which is created with Flickr API by using the following Angular code:

angular.module('myapp', ['ngResource']).
controller('MyController', ['$scope', '$resource', function ($scope,$resource) {
    $scope.photoAPI = $resource("http://www.soe.gr/photos.txt",
{ callback: "JSON_CALLBACK" }, { get: { method: "JSONP" }});
$scope.photos=$scope.photoAPI.get();
}]);

I am using $resource as not to be blocked since I am trying to get data from another domain. However, I am getting the following error: Uncaught ReferenceError: jsonFlickrFeed is not defined .

• My first question is what exactly is this kind of typing: jsonFlickrFeed({...})
• My second question is, of course, how may I get the items property of the above JSON object into my $scope as to manipulate them and proceed with my code since I am stuck! Thank you

Answer 1

$resource is for handling REST APIs even if its possible to redefine get method with jsonp it has no use, its better to do it using $http :

  var url = "http://www.soe.gr/photos.txt?callback=JSON_CALLBACK";
  $http.jsonp(url).then(function(response) {
    console.log(response.data);
  });

What is JSONP: https://en.wikipedia.org/wiki/JSONP

JSONP (JSON with Padding) is a technique used by web developers to overcome the cross-domain restrictions imposed by browsers to allow data to be retrieved from systems other than the one the page was served by.

Its main point its not loading JSON data but load the script where you can see function call with json data as parameter - in your file you can see jsonFlickrFeed({...}). But the function needs to exist. In AngularJS application angular provides it for you transparently and sends its generated name to the requested script instead of JSON_CALLBACK in parameter.

But here your endpoint is probably just static file not script which could provide JSONP response with given customized callback function.

You can see its working here - http://jsbin.com/becufenepo/edit?js,console

Its url contains parameter jsoncallback=JSON_CALLBACK, angular sends generated name and in network console you can see request for

https://www.flickr.com/services/rest/ ... &jsoncallback=angular.callbacks._0

And its response then contains function calling angular.callbacks._0({})

Thats all, so main cause is that your endpoind its not capable to provide jsonp.