Angular.jsの$httpでxmlを取得する

Angular.jsの$httpでxmlを取得して、配列に変更してみます。

サンプルコード

HTML

<div ng-controller="getdata_Ctrl">
	<ul>
		<li ng-repeat="item in xmlData">
			<a href="{{item.link}}">{{item.title}}</a>
		</li>
	</ul>
</div>

JavaScript

angular.module('app', []).controller('getdata_Ctrl', function($scope, $http) {
	$scope.xmlData = [];

	$http.get('https://cly7796.net/blog/feed/').success(function(data) {
		// 取得したデータをDOMに変換
		var parser = new DOMParser();
		var doc = parser.parseFromString(data, "application/xml");

		// 各記事のtitleとlinkをxmlDataに格納
		var items = doc.getElementsByTagName('item');
		for (var i = 0; i < items.length; i++) {
			$scope.xmlData.push({});
			$scope.xmlData[i]['title'] = items[i].getElementsByTagName('title')[0].innerHTML;
			$scope.xmlData[i]['link'] = items[i].getElementsByTagName('link')[0].innerHTML;
		}
	}).error(function() {
		alert('取得失敗');
	});
});

xmlを取得するデモページ
　

【参考サイト】

• JavaScriptプログラミング講座【DOMParser について】