Hola comunidad bienvenidos a este post sobre como recorrer un array con información para luego mostrarlo en algun lado de nuestra aplicación web o app.
Seguramente estas desarrollando en este momento una aplicación donde necesitas tomar la data que se obtiene mediante una petición Ajax, La mayoria de peticiones que realizamos son a APIS externas donde mediante una clave id y clave secret nos conectamos para traer la información sin necesidad de tener una base de datos.
Antes de continuar vamos a conocer un poco mas de algunas tecnologías como AJAX. Según muchas plataformas lo definen como una técnica de desarrollo para obtener información o enviar información sin refrescar la pagina web o app.
Para el funcionamiento completo del AJAX, necesitamos una API, se define como protocolos que usa como conexión un frontend a un servidor para solicitar una información. en algunas ocasiónes las API son totalmente privadas y en algunos casos las API son públicas.
Una ves entendido estas 2 utilidades en el desarrollo profesional comenzaremos a hablar como nosotros podemos mostrar la información de una api en una vista, ya sea en un frontend tradicional o webapp.
La primera manera de hacer una petición de ajax seria usando la librería de JQUERY (Aunque esta librería ya paso de moda por metodo ajax nativo en es6) También lo vamos a mencionar.
$.ajax({
type : 'GET',
url : 'https://api.spotify.com/v1/search',
data : {'q':'coldplay',
'type':'artist'
},
dataType : 'json',
success : function(data) {
$('#success #artisturl').html(data.artists.items[0].uri) ;
},
}) ;
Como vemos en estas lineas de código, es un function de jquery que llama a AJAX para pasar una serie de parametros JSON, cada parámetro tiene una key con su valor determinado, en el caso de esta solicitud se enviara por el método GET, este método es visible para cualquier usuario que ingrese una url al navegador la cual nos responderá un formato JSON del link o url.
Adicional a este método se agregan también unos key que son importantes para la solicitud. como el url la cual es donde solicitamos y ellos nos responderán con la información que vamos a mostrar.
Hay algo importante en esta solicitud la cual es la función de success, donde vamos a pasar por parámetro un nombre y mostraremos si se requiere por console.log(la_data) la información que nos llegara de la url que solicitamos.
De esta manera al conocer bien el json, nosotros podemos llamar a un elemento del DOM mediante el ID document.getElementById(‘DOMID’) o Class el identificador mas usado para nuestra arquitectura de HTML o adicionalmente llamar al elemento en si.
Al obtener el elemento de nuestro DOM. pasamos a rellenar la información ya sea textual con .innerText o .innetHtml a simple vista entendemos su funcionamiento de cada uno. podemos agregar un bloque de texto o un bloque de código html embebido con la información que nos brindo la respuesta que hicimos en nuestra solicitud.
De esta manera logramos obtener la información y también mostrar en una vista determinada la información que nos llega externamente.
Pero un momento, esta es una de las maneras que seguramente te cruzaras, pero existe otras utilidades como librerías o métodos nativos para hacer nuestra solicitud de ajax a un servidor externo.
GET (Leer datos), Como bien hablamos hace un momento en el articulo este Método lo veremos en la mayoría de APIS.
fetch('http://ejemplo.com/api/user')
.then(function(response) {
return response.json();
})
.then(function(response) {
console.log(response)
});
POST (Crear nuevos datos), Este método se conoce por que envía información mediante las cabeceras de una aplicación, ademas de que no se ve reflejado en una url como lo hace el método GET.
fetch('http://ejemplo.com/api/user', {
headers: {
'Content-type': 'application/json'
},
method: 'POST',
body: { name: 'Paquito Chocolatero', age: 31 },
}).then(function(data) {
console.log(data);
});
PUT (Actualizar), Este método seguramente lo oiste pero nunca usaste, nos sirve para actualizar información,también puedes usar POST O GET para hacer un update, pero de manera profesional y siguiendo el orden de métodos la mejor opción es usar este método PUT.
fetch('http://ejemplo.com/api/user/1/age', {
headers: {
'Content-type': 'application/json'
},
method: 'PUT',
body: 32,
})
.then(function(data) {
console.log(data);
});
;
DELETE (Borrar), Como mencione hace un momento podemos borrar un elemento de nuestra base de datos o api, usando no solo el DELETE, también se usa el POST, GET O PUT.
fetch('http://ejemplo.com/api/user/1', {
method: 'DELETE',
})
.then(function(data) {
console.log(data);
});
De esta manera como se muestra en los ejemplos son los métodos que nos sirve para crear,editar o eliminar algun dato de la api interneta si es de nosotros o externa.
En es6 para crear una petición Ajax se usa de la siguiente manera, llamamos a fetch, se pasa 2 parámetros, el primer parámetro es directamente la URL o EndPoint a donde se enviara el request que haremos., y en segundo parámetro, el método y cabeceras adicionales si necesitemos. posteriormente si queremos mostrar la información lo haremos mediante el uso de .THEN donde pasaremos un parámetro e imprimiremos por consola lo que nos esta devolviendo la api.
Recuerden que para iterar una información si es un array y contiene JSON, se hace el uso de for, map, each. de esta manera recorreremos el listado de información para crear un html o mostrar directamente la información en la vista de usuarios.
