Communicate Between Controllers

Fetch XML feed with AngularJS

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.

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

Leave a reply:

Your email address will not be published.