Edición de productos con verbo PUT en JavaScript

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.