Angular $http and Google Feed API

Question

I am a beginner and the "assignment" is to pull in an RSS feed for use in an Angular/Ionic project. I can either parse the RSS feed myself or use an external tool such as Google Feed API.

I created a service to get the data which is then used by an Angular controller.

This is the service:

    .factory('rssReader', ['$http', function($http) {
  return $http.get('URL_HERE')
  .success(function(data) {
    alert("SUCCESS!!!" + data);//return data;
  })
  .error(function(data) {
    alert("FAILED!!!!" + data);//return data;
  });
}]);

Using this CodeCademy URL gives the "SUCCESS" alert and returns JSON data:
http://s3.amazonaws.com/codecademy-content/courses/ltp4/events-api/events.json

However, this Google Feed API URL is returning null. Example URL:
http://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q=http://rss.cnn.com/rss/cnn_topstories.rss&num=5

I have seen examples online doing it differently but I am trying to understand why this is not working.

What is wrong?
What are tips/tools I can use for debugging?

I am new to Angular and JavaScript so appreciate any help. Thanks!

The controller is below, rssReaderTest is a test service pulling from a URL and is working: `.controller('NewsCtrl', ['$scope', 'rssReaderTest', 'rssReader', function($scope, rssReaderTest, rssReader) { rssReaderTest.success(function(data) { $scope.rssFeedTest = data; }); rssReader.success(function(data) { $scope.rssFeed = data; }); }])` — Roy Racer, Jul 13 '15 at 01:12
`.controller('NewsCtrl', ['$scope', 'rssReaderTest', 'rssReader', function($scope, rssReaderTest, rssReader) { rssReaderTest.success(function(data) { $scope.rssFeedTest = data; }); rssReader.success(function(data) { $scope.rssFeed = data; }); }])` — Roy Racer, Jul 13 '15 at 01:23
Sorry for the jarble, not sure why the white space is not being preserved. — Roy Racer, Jul 13 '15 at 01:25

score 1 · Answer 1 · edited May 23 '17 at 12:29

Your implementation is correct, (even though it looks like you are calling the .success function, both in your service AND in the controller) - but I think the real problem actually lies in the resource you are trying to call.

When I call the s3.amazonaws feed, I get data as you describe, but when calling the GoogleAPI the XMLHttpRequest is blocked due CORS. You can read a bit more about that here CORS (Cross-Origin Resource Sharing) header.

A way of avoiding this, could be to handle the request to the Google API from serverside, and not directly in the browser.

Hope this helps :)

Angular $http and Google Feed API

1 Answers1