Is it possible to read XML RSS in AngularJS?

Question

as far as I understand, it is not possible to read RSS in XML format using AngularJS from remote host. Cross Origin request error. The same way it is not possible to load XML from a remote site?

I am trying to find a way to load remote RSS, that is actually just an XML from a different site.

For example I have this news RSS that I wont to display in my AngularJS application.

http://rss.newsru.com/top/big/

using $http.get() results in CORS error using $http.jsonp() results in JSON format error, since the source is XML, not json.

Is there any workaround for this problem without any server-side code?

Thanks

score 3 · Accepted Answer · answered Sep 08 '17 at 13:54

In the past you could use Google Feed API or YQL to parse XML and return JSON to be used with $http.jsonp() method. But now both are no longer supported. If you don't want to change your back-end, you can try using rss2json service as suggested here (but no-one guarantees it will work stable, so better to use your own API).

In your case the code could look like below:

(function (angular) {
    'use strict';

    angular.module('RSSFeedApp', []);

    angular.module('RSSFeedApp').controller("FeedCtrl", ['FeedService', function (Feed) {
        var vm = this;
        Feed.parseFeed('http://rss.newsru.com/top/big/').then(function (res) {
            vm.items = res.items;
        });
    }]);

    angular.module('RSSFeedApp').factory('FeedService', ['$http', function ($http) {
        return {
            parseFeed: function (url) {
                return $http.jsonp('//api.rss2json.com/v1/api.json?callback=JSON_CALLBACK&rss_url=' + encodeURIComponent(url)).then(function (res) {
                    return res.data;
                });
            }
        }
    }]);
})(angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<div ng-app="RSSFeedApp" ng-controller="FeedCtrl as vm">
    <div class="row-fluid">
        <ul class="unstyled">
            <li ng-repeat="item in vm.items">                    
                <h5><a>{{item.title}}</a></h5>                                       
                <p class="text-left">{{item.description}}</p>                    
                <span class="small">{{item.pubDate}}</span>
            </li>                
        </ul>            
    </div>
</div>

Is it possible to read XML RSS in AngularJS?

1 Answers1