1

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.

  1. 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?

  2. 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>

Improve this question
1
  • 1
    Should it be console.log instead of just log? Commented Feb 6, 2015 at 21:10

2 Answers 2

Reset to default
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>

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

absolutely brilliant answer. Thanks :)
wow! kind of weird, I have never come across something like this --> good work!
@amitthk please see question here if you get a chance. any feedback would be really appreciated - stackoverflow.com/questions/35939620/…
@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 it was solved -- see here stackoverflow.com/questions/35951547/…
0

To avoid using jsonp, add the following query parameter:

&nojsoncallback=1

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.