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
– Roy Racer, Commented Jul 13, 2015 at 1: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
– Roy Racer, Commented Jul 13, 2015 at 1:23
Sorry for the jarble, not sure why the white space is not being preserved. — Roy Racer
– Roy Racer, Commented Jul 13, 2015 at 1:25

Community · Accepted Answer · 2017-05-23 12:29:50Z

1

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 :)

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Aug 3, 2015 at 20:45

Jesper Bruun Hansen

3762 gold badges5 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Angular $http and Google Feed API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related