Printing Flickr API Response to Console AngularJS

Question

I'm currently trying to make the API call work and want to see if it has managed to return the API data from the external source.

How do I print an output to the console from the app.js file, so that in this case I can see whether the API call has been returned?/is there a better way of doing this that I'm missing?
Should I be using $http or $resource?

Current code: js/app.js

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

  function AppGallery($scope, $http) {
    $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?').success(function (data) {
      $scope.data = data;
      log(data);
    });
  };

<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
  <title>Photo Viewer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
  <script src="js/app.js"></script>
</head>

<body ng-controller="AppGallery">

  {{data}}

</body>
</html>

Should it be `console.log` instead of just `log`? – Paulo Scardine Feb 06 '15 at 21:10 — Paulo Scardine, Feb 06 '15 at 21:10

score 4 · Accepted Answer · edited May 23 '17 at 11:45

4

This actually works a bit differently. You will have to define the callback function jsonFlickrFeed. Check the code below.

You will notice two things here:-

We're requesting the data with parameter ?format=json. Check the response here.
You'd notice that the response coming out is looking for a callback function jsonFlickrFeed. Just define the handler for data into this function and there we go.

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

  app.controller('AppGallery',[ '$scope','$http', function AppGallery($scope, $http) {
    $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?format=json').success(function (data) {
      
    });
 
 jsonFlickrFeed = function(data){
 $scope.data = data;
  console.log(data);
 }
  }]);

<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
  <title>Photo Viewer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
  <script src="js/app.js"></script>
</head>

<body ng-controller="AppGallery">

  {{data}}

</body>
</html>

Check here and for more information.
If you're using jQuery you can use jQuery.getJSON instead. More details regarding jQuery.getJSON .

Hope this helps! Please mark as answer if it does! Thanks!

edited May 23 '17 at 11:45

Community

1
1

answered Feb 07 '15 at 08:35

amitthk

1,115
1
11
19

absolutely brilliant answer. Thanks :) – Christopher Batts Feb 07 '15 at 10:53
wow! kind of weird, I have never come across something like this --> good work! – Paul Fitzgerald Mar 08 '16 at 16:48
@amitthk please see question here if you get a chance. any feedback would be really appreciated - http://stackoverflow.com/questions/35939620/angular-callback-api-add-error-message-if-fails – Paul Fitzgerald Mar 11 '16 at 12:10
@PaulFitzgerald couldn't reach the link to your question. Lemme know if you're still looking for answer and it's not yet answered. Thanks – amitthk Mar 12 '16 at 05:17
@amitthk it was solved -- see here http://stackoverflow.com/questions/35951547/angular-callback-api-add-error-message-if-fails – Paul Fitzgerald Mar 12 '16 at 10:41

score 0 · Answer 2 · answered Jan 24 '17 at 01:15

0

To avoid using jsonp, add the following query parameter:

&nojsoncallback=1

See: https://www.flickr.com/services/api/response.json.html

answered Jan 24 '17 at 01:15

Justin Mitchell

665
6
13

Printing Flickr API Response to Console AngularJS

2 Answers2

Linked