En este post, vamos a ver cómo podemos cargar un archivo XML para después mostrarlo como un li usando ng-repeat en Angular JS. Como todos sabéis, Angular JS es un framework de JavaScript para el desarrollo de aplicaciones. Así que, básicamente, Angular JS espera la respuesta en forma de JSON. Por lo tanto, se recomienda devolver los datos en formato JSON antes de empezar a trabajar con ellos. Aquí, en este artículo, vamos a cargar un archivo XML local utilizando el servicio $http de Angular JS, y vamos a convertir el mismo archivo XML a JSON. Una vez que lo convirtamos, vamos a recorrer el JSON y a mostrarlo como un li utilizando ng-repeat. Si eres nuevo en estop de Angular JS, no te preocupes, este tutorial no es muy complicado. Espero que te guste este artículo.
El código
Antes que nada, creamos una página html
<!DOCTYPE html>
<html>
<head>
<title>Cargar un XML y mostrarlo como un li en Angular JS</title>
</head>
<body>
</body>
</html>
Ahora, añadimos las referencias necesarias tal que así
<script src="jquery-2.1.3.min.js"></script>
¿Te has dado cuenta de que he añadido un archivo xml2json.js? Este es el archivo que se encargará de la parte de la conversión. Siempre puedes descargar el archivo desde https://code.google.com/p/x2js/.
Así que, si has leido y puesto en práctica como te explicamos en el artículo sobre cómo convertir archivos XML a JSON en Angular JS, tu página debería verse como la siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Cargar un XML y mostrarlo como un li en Angular JS</title>
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
</head>
<body>
<div ng-app="httpApp" ng-controller="httpController">
</div>
<script>
var app = angular.module('httpApp', []);
app.controller('httpController', function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
console.log(response);
});
});
</script>
</body>
</html>
Ya hemos cargado nuestro archivo XML y lo hemos convertido a JSON. Ahora, tenemos que mostrar la respuesta JSON como un li usando ng-repeat en Angular JS. ¿Estás listo?
Para ello, cambia la directiva ng-app de la siguiente manera:
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in
details"><a href="{{det.loc }}">{{det.loc }}</a>
</li>
</ul>
</div>
Y ahora cambiamos la implementación de nuestro script de Angular así:
<script>
var app = angular.module('httpApp', []);
app.controller('httpController', function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
$scope.details = response.urlset.url;
console.log(response);
});
});
</script>
Así que estamos asignando response.urlset.url al $scope.details para que simplemente pueda recorrerlo usando ng-repeat. Si descargamos un archivo sitemap.xml a partir del código fuente de una web determinada, se puede llegar a conocer la estructura XML de los datos. Dependiendo de la estructura de datos, necesitamos asignar la respuesta al $scope.
Supongo que todo está hecho, ahora podemos ver la salida de datos como li.
Código completo
<!DOCTYPE html>
<html>
<head>
<title>Cargar un XML y mostrarlo como un li en Angular JS</title>
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
</head>
<body>
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in
details"><a href="{{det.loc }}">{{det.loc }}</a>
</li>
</ul>
</div>
<script>
var app = angular.module('httpApp', []);
app.controller('httpController', function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
$scope.details = response.urlset.url;
console.log(response);
});
});
</script>
</body>
</html>
Y este ha sido el tutorial sobre cómo iterar una lista en Python, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!