Hey there, I could really use some assistance. I've been trying to solve this puzzle for the past few days without much luck.
My goal is to extract only the item objects from an XML RSS file using Angular and x2js. The structure of the XML file looks like this:
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
<channel>
<title>Test Title</title>
<link>
https:somelocation.com
</link>
<description>List Title 1</description>
<pubDate>Wed, 26 Apr 2017 13:04:51 GMT</pubDate>
<dc:date>2017-04-26T13:04:51Z</dc:date>
<item>
<title>Test Title 1</title>
<link>
https://plnkr.co
</link>
<description>
<DIV> <P>Some description text</P> </DIV>
</description>
<pubDate>Wed, 26 Apr 2017 13:04:51 GMT</pubDate>
<guid>
https://plnkr.co
</guid>
<dc:date>2017-04-26T13:04:51Z</dc:date>
</item>
</channel>
</rss>
I have successfully retrieved the results, but when attempting to use ng-repeat in my markup, it's iterating over everything in the channel section, resulting in empty list objects being displayed. Here's a snippet of my HTML:
<html ng-app="myApp">
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17767970627b7665397d64572339273927">[email protected]</a>" data-semver="4.0.0"
src="https://code.angularjs.org/latest/angular.min.js"></script>
<script src="xml2Json.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="listController">
<ul ng-repeat="item in list">
<li ng-repeat="i in item">
<h2><a href="{{i.link}}">{{i.title}}</a></h2>
</li>
</ul>
</body>
</html>
Below are my script files:
var myApp = angular.module('myApp', []);
myApp.controller('listController', function($scope,$http){
$http.get('rssFeed.xml', {
transformResponse: function (data) {
var x2js = new X2JS();
var listData = x2js.xml_str2json(data);
return listData.rss.channel.item;
}
}).then(function successCallback(response, status){
$scope.list = response;
}, function errorCallback(response, status){
console.log('Request failed' + status);
});
});
You can access the Plunkr demo here: Plunker Demo