AngularJS fetches the JSON feed from external file. But in case if we want to fetch the feed from an XML?
In this post I will let you know the Dependency Injection (DI) available to fetch the XML feed in AngularJS. This post is in continuation of my earlier Introduction of AngularJS post.
Recently, I thought to show my Stack Overflow feed on my blog and started creating a small widget using AngularJS. As Stack Overflow offers user feed in XML format, I started using the same.
In curiosity to learn AngularJS I thought to fetch the XML feed from external file instead of JSON. So I started searching in Google and found there is a DI available for the rescue – X2JS.
Install X2JS using Bower
In case you’re using bower, run the code below on your project directory:
bower install angular-x2js --save
and copy below code to your index file
<script src="bower_components/x2js/xml2json.js"><script> <script src="bower_components/angular-x2js/src/x2js.js"></script>
Or
Download .js files from Google & .zip from Git and save in scripts folder of project and add a link to it in index file.
From Google
<script src="siteware/scripts/xml2json.js"></script>
From Git
<script src="siteware/scripts/x2js.js"></script>
Dependency Injection – X2JS
Now add DI to main angular module:
angular.module('ngAuidApp', ['cb.x2js']);
That’s it… you ready to use the DI service wherever you want to use, just inject it on controller:
angular.module('ngAuidApp').controller('ProfileCtrl', [ '$scope', 'x2js', 'profileInfoService', function ($scope, x2js, profileInfoService) { }]);
JS
So to achieve my mission to display Stack Overflow on my blog I have created a service which fetches feeds from it.
angular.module('ngAuidApp').service('profileInfoService', ['$http', function($http){ return $http.get('http://stackoverflow.com/feeds/user/3635285'); }]);
Now I have caught the feed in $scope variable so I can call it in my page to display information.
angular.module('ngAuidApp').controller('ProfileCtrl', ['$scope', 'x2js', 'profileInfoService', function ($scope, x2js, profileInfoService) { profileInfoService.success(function(data){ var json = x2js.xml_str2json(data); $scope.dataSet = json.feed; }); }]);
HTML
Below is the code for HTML page to display my feed:
<div class="container"> <h1><a href="{{dataSet.link[1]._href}}" target="_blank">Stack Overflow</a></h1> <p>Last Active - {{dataSet.updated|date}}</p> <h2>Latest Activities:</h2> <ol class="list-unstyled"> <li ng-repeat="entry in dataSet.entry | limitTo:10"> <article class="entry"> <h2><a href="{{entry.id}}" target="_blank">{{entry.title.__text}}</a></h2> <p>Tags:<span ng-repeat="cat in entry.category"> <a href="http://stackoverflow.com/questions/tagged/{{cat._term}}" target="_blank">{{cat._term}}</a></span></p> <p ng-bind-html="entry.summary.__text"></p> </article> </li> </ol> </div>
Stack Overflow gives 30 latest feeds but you can restrict it to display 5 or 10 as per your need by supplying a AngularJS filter limitTo:10 in the ng-repeat directive.
That’s it folks… the snippet above will display my latest 10 activities from my stack overflow account to anywhere I want. You may try it by replacing your XML feed URL in the service that I have created above.
Do provide your feedback in comment section below.