JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="myApp">
<section ng-controller="AppController" class="container-podcastapp">
<ul>
<li ng-repeat="guitar in dataSet">
<div class="resultwrapper">
<h2>{{guitar.make}}</h2>
</div>
</li>
</ul>
</section>
</div>
JavaScript
angular.module('service', []).
factory('DataSource', ['$http',
function ($http) {
return {
get: function (file, callback, transform) {
$http.post(file, {}, {
transformResponse: transform
}). // this is the change
success(function (data, status) {
console.log("Request succeeded");
callback(data);
}).
error(function (data, status) {
console.log("Request failed " + status);
});
}
};
}
]);
var myApp = angular.module('myApp', ['service']);
myApp.controller('AppController', function ($scope, DataSource) {
var SOURCE_FILE = "http://cristianoveloz.com/podcast5/scripts/guitars.xml";
xmlTransform = function (data) {
console.log("transform data");
var x2js = new X2JS();
var json = x2js.xml_str2json(data);
return json.guitars.guitar;
};
setData = function (data) {
$scope.dataSet = data;
};
DataSource.get(SOURCE_FILE, setData, xmlTransform);
});