Parzibyte's blog

Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.

Enviar JSON de Angular a Node: ejemplo

En este post te mostraré, de manera simple, cómo enviar datos codificados como JSON desde Angular a un servidor con node.

Vamos a usar express en el lado del servidor; y del lado del cliente simplemente fetch.

Preparando servidor

En el lado del servidor necesitamos usar el middleware de JSON que convertirá la petición a datos JSON. Comenzamos importando a express e instanciando nuestra app:

Luego usamos el middleware.

Con eso, cada que express detecte que una petición tiene Content-Type en application/json dentro de un encabezado, intentará interpretar los datos JSON.

Haciendo petición

Ahora desde Angular simplemente usamos lo siguiente:

Como ves usamos fetch, enviamos el encabezado y además los datos codificados como JSON. Si quieres puedes usar await y si no, simplemente promesas.

Nota: si quieres usar await asegúrate de declarar tu función (dentro del componente de Angular) async; así:

Leyendo datos en el servidor

Finalmente veamos cómo recibimos los datos con Node. Como puedes ver anteriormente enviamos un payload con nombre y web. Ahora podemos leerlos dentro de una configuración de rutas así:

En resumen

Preparamos a express para que lea JSON. Luego de eso podemos leer los datos enviados desde el cliente a través de req.body. Recuerda que req en este caso es la primer variable que se recibe en el callback cuando se configura una ruta, y representa la petición.

Después en el lado del cliente usamos fetch, establecemos el encabezado para indicar que enviamos un JSON y enviamos en el body el JSON codificado con JSON.stringify.

Este ejemplo funciona perfectamente para Angular, no importa si usas JavaScript o TypeScript.

Con esto puedes enviar todo tipo de datos complejos: objetos, simples variables, arreglos de objetos, objetos con arreglos, etcétera.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *