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.
Acostumbremonos a usar más la programación funcional de Javascript a la hora de trabajar en el día a día.
Otros artículos relacionados : JavaScript NameSpaces , JavaScript y consola , Javascript threads
Excelente !
gracias 🙂
[…] Otros artículos relacionados: JavaScript Iteradores ,JavaScript Console ,JavaScript Map y JSON […]
[…] Otros artículos relacionados: Java Reduce , JavaScript Map y JSON […]
[…] artículos relacionados JavaScript Map y JSON , jQuery […]