JavaScript Map y JSON

En muchas ocasiones nos encontramos realizando peticiones AJAX desde JavaScript a servicios REST. En un porcentaje importante de las situaciones los datos que recibimos en JSON no son los datos que deseamos y deberemos realizar alguna transformación o modificación.

JavaScript Map

Muchas veces para realizar esta operación recorremos la lista de objetos y obtenemos los nuevos datos que queremos a través de alguna operación un tanto compleja. Sin embargo nos olvidamos muchas veces que JavaScript soporta la función map que nos permite realizar un mapeo rápido.

Vamos a ver un ejemplo sencillo para ello partiremos de la siguiente estructura JSON que nos devuelve el servidor en la url gastos.

[{"concepto":"mac","importe":1000},{"concepto":"android","importe":500}]

Son los datos de una sencilla compra los cuales queremos transformar a un formato diferente en el cual nos aparezca el concepto en mayúscula y dispongamos tanto del importe como el importe con iva.


<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {

$("#json").click(function() {

$.getJSON("gastos",function(datos) {

var nuevosDatos=datos.map(function(elemento) {

return {

concepto:elemento.concepto.toUpperCase(),
importe:elemento.importe,
importeIva:elemento.importe*1.21
}

});
console.log(nuevosDatos);

});
});

});

</script>
</head>
<body>
<input type="button" value="json" id="json"/>

<div id="zona">
</div>
</body>
</html>

Como podemos ver la función map transforma los datos en otra estructura la cual imprimimos por la consola.