Edición de productos con verbo PUT en JavaScript

Contenido del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

17
APIs REST con JavaScript dominadas
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:15

Edición de productos con verbo PUT en JavaScript

Curso de API REST con Javascript

Clase 15 de 17

Clase 15 / 17

Recursos

Actualizar un producto de forma segura y completa exige entender el verbo put, construir correctamente la URL con el ID y mapear el formulario a los datos esperados. Aquí verás cómo implementar la edición de productos en JavaScript usando fetch, integrar el template de edición y validar el flujo con una prueba real cambiando el precio de 44 a 15.

¿Cómo editar un producto con el verbo put en el API?

La especificación indica que la actualización es total: se envía el objeto completo del producto con el verbo put. Además, la URL debe incluir el ID del producto. El cuerpo es similar al de creación: el mismo JSON pero con todos los campos necesarios.

Actualización total de la instancia con put.
URL con el ID del producto al final.
Body en JSON con todos los campos.

¿Qué cambia en la url y el body?

Se agrega el productId al final de la URL con template literals.
Se usa el mismo payload de creación, pero completo.
Se ajusta el método de la petición a put.

// Repositorio: método de edición total
async function editProduct(productId, productData) {
  const response = await fetch(`${url}${productId}/`, {
    method: 'PUT',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(productData)
  });

  if (!response.ok) {
    throw new Error(`No se puede actualizar el producto ${productId}. Status: ${response.status}`);
  }

  const jsonResponse = await response.json();
  return jsonResponse;
}

¿Qué cabeceras y errores considerar?

Accept y Content-Type como application/json.
Validar response.ok para detectar fallos.
Lanzar error con status code para diagnóstico.

Nota: inicialmente se pensó en un método llamado updateProduct, pero se estandarizó como editProduct para coincidir con la invocación.

¿Cómo preparar el template para precargar el formulario?

Se usa un botón de edición que trae los datos del API y precarga el formulario. En edit.js, el método loadProduct toma el repository desde window, invoca getProduct con el ID y muestra el formulario.

Uso de window.productRepository para centralizar llamadas.
Invocación de getProduct(productId) y validación de producto existente.
Render del formulario con datos actuales.

// edit.js: carga de datos antes de editar
async function loadProduct() {
  const repo = window.productRepository;
  const productId = new URLSearchParams(location.search).get('id');

  const currentProduct = await repo.getProduct(productId);
  if (!currentProduct) {
    showError('Producto no encontrado.');
    return;
  }

  renderForm(currentProduct); // precarga el formulario
}

Si no existe el producto, mostrar error y detener flujo.
Si existe, mostrar formulario con los valores actuales.

¿Cómo enviar el formulario y probar la actualización?

El envío se gestiona con handleSubmit: ajusta los datos al formato esperado por el API y llama a editProduct(productId, updatedData). Particularmente, el campo de imágenes debe mapearse: no es imageUrl, sino images, y debe ser una lista de cadenas.

Obtener productId desde la URL: parámetro id.
Mapear imageUrl a images (lista de strings).
Invocar repo.editProduct y manejar la promise con then.

// edit.js: envío del formulario y llamada a la edición
async function handleSubmit(e) {
  e.preventDefault();

  const repo = window.productRepository;
  const productId = new URLSearchParams(location.search).get('id');

  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData);

  // Ajuste requerido por el API
  if (data.imageUrl) {
    data.images = [data.imageUrl];
    delete data.imageUrl;
  }

  repo.editProduct(productId, data)
    .then((response) => {
      console.log(response); // *console log* de validación
    })
    .catch((err) => console.error(err));
}

¿Qué errores típicos corregir en el repositorio?

Parametrización: usar productData y no un nombre distinto como product.
Nombres coherentes: alinear editProduct en el repository y en las llamadas.
Pruebas con breakpoint y console log para inspeccionar variables.

¿Cómo validar el flujo con una prueba rápida?

Cambiar el precio de 44 a 15 en el formulario y enviar.
Verificar que el server responde OK y retorna el mismo objeto con precio 15.
Recargar y comprobar que el precio cargado ahora es 15.

Habilidades y conceptos reforzados:

Lectura de documentación de API y uso de put para actualización total.
Construcción de URL con ID y template literals.
Uso de fetch con headers y cuerpo en JSON.
Manejo de errores con throw new Error y response.status.
Trabajo con promises y async/await.
Integración del template y precarga de formulario desde el API.
Normalización de datos: images como lista de strings.
Depuración con breakpoint y console log.

¿Tuviste algún reto con el mapeo de imágenes, el nombre del método o la captura del ID? Cuéntame en comentarios qué problemas encontraste al implementar el verbo put en el template y cómo lo resolviste.

Resumen

¿Cómo editar un producto con el verbo put en el API?

Actualización total de la instancia con put.
URL con el ID del producto al final.
Body en JSON con todos los campos.

¿Qué cambia en la url y el body?

Se agrega el productId al final de la URL con template literals.
Se usa el mismo payload de creación, pero completo.
Se ajusta el método de la petición a put.

// Repositorio: método de edición total
async function editProduct(productId, productData) {
  const response = await fetch(`${url}${productId}/`, {
    method: 'PUT',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(productData)
  });

  if (!response.ok) {
    throw new Error(`No se puede actualizar el producto ${productId}. Status: ${response.status}`);
  }

  const jsonResponse = await response.json();
  return jsonResponse;
}

¿Qué cabeceras y errores considerar?

Accept y Content-Type como application/json.
Validar response.ok para detectar fallos.
Lanzar error con status code para diagnóstico.

Nota: inicialmente se pensó en un método llamado updateProduct, pero se estandarizó como editProduct para coincidir con la invocación.

¿Cómo preparar el template para precargar el formulario?

Uso de window.productRepository para centralizar llamadas.
Invocación de getProduct(productId) y validación de producto existente.
Render del formulario con datos actuales.

// edit.js: carga de datos antes de editar
async function loadProduct() {
  const repo = window.productRepository;
  const productId = new URLSearchParams(location.search).get('id');

  const currentProduct = await repo.getProduct(productId);
  if (!currentProduct) {
    showError('Producto no encontrado.');
    return;
  }

  renderForm(currentProduct); // precarga el formulario
}

Si no existe el producto, mostrar error y detener flujo.
Si existe, mostrar formulario con los valores actuales.

¿Cómo enviar el formulario y probar la actualización?

Obtener productId desde la URL: parámetro id.
Mapear imageUrl a images (lista de strings).
Invocar repo.editProduct y manejar la promise con then.

// edit.js: envío del formulario y llamada a la edición
async function handleSubmit(e) {
  e.preventDefault();

  const repo = window.productRepository;
  const productId = new URLSearchParams(location.search).get('id');

  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData);

  // Ajuste requerido por el API
  if (data.imageUrl) {
    data.images = [data.imageUrl];
    delete data.imageUrl;
  }

  repo.editProduct(productId, data)
    .then((response) => {
      console.log(response); // *console log* de validación
    })
    .catch((err) => console.error(err));
}

¿Qué errores típicos corregir en el repositorio?

Parametrización: usar productData y no un nombre distinto como product.
Nombres coherentes: alinear editProduct en el repository y en las llamadas.
Pruebas con breakpoint y console log para inspeccionar variables.

¿Cómo validar el flujo con una prueba rápida?

Cambiar el precio de 44 a 15 en el formulario y enviar.
Verificar que el server responde OK y retorna el mismo objeto con precio 15.
Recargar y comprobar que el precio cargado ahora es 15.

Habilidades y conceptos reforzados:

Lectura de documentación de API y uso de put para actualización total.
Construcción de URL con ID y template literals.
Uso de fetch con headers y cuerpo en JSON.
Manejo de errores con throw new Error y response.status.
Trabajo con promises y async/await.
Integración del template y precarga de formulario desde el API.
Normalización de datos: images como lista de strings.
Depuración con breakpoint y console log.

Fundamentos HTTP

Cómo JavaScript habla con una API

Cómo funciona el protocolo HTTP entre JavaScript y APIs

Qué significan los códigos de estado HTTP

Headers HTTP: qué son y cómo funcionan

Peticiones HTTP reales en el navegador

APIs y REST para consumidores

Como APIs usam HTTP para conectar apps

Qué es REST y cómo organiza las APIs web

Documentación de API REST con editor de texto

Setup y Arquitectura Base

Configuración de template de tienda virtual para consumir API REST

Peticiones HTTP con Fetch en JavaScript

Patrón repositorio para centralizar fetch

Métodos HTTP en práctica con FakeStoreAPI

Integración de productos y detalle con fetch

Filtrar productos por categoría con URLSearchParams

Crear productos con fetch y POST

Edición de productos con verbo PUT en JavaScript

Cómo implementar DELETE en un repositorio

Optimización y próximos pasos

APIs REST con JavaScript dominadas

Edición de productos con verbo PUT en JavaScript

Progreso del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

Recursos

Recursos