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.

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

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

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