Framework Angular

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:

const express = require("express");
const app = express();

Luego usamos el middleware.

app.use(express.json())

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:

const datos = {
  nombre: "Luis Cabrera Benito",
  web: "parzibyte.me",
};
const respuestaRaw = await fetch("http://sitio.com", {
  body: JSON.stringify(datos), // <-- Aquí van los datos
  headers: {
    "Content-Type": "application/json", // <-- Importante el encabezado
  },
  method: "POST",
});
const jsonDecodificado = await respuestaRaw.json();
console.log(jsonDecodificado);

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í:

public async tu_función_en_angular(){
  // Aquí el código
}

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í:

app.post("/usuario", async (req, res) => {
  // Dentro de req.body tenemos a todo el objeto. Podemos acceder a las claves del mismo como
  // lo enviamos desde el cliente ;)
  const nombre = req.body.nombre;
  const web = req.body.web;
  // Aquí hacer algo con las dos variables y responder la petición
});

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

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.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

3 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

3 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

4 días hace

Esta web usa cookies.