Skip to content

Daba.json

Carolina Mamani edited this page Nov 7, 2023 · 2 revisions

Extracción de Parámetros URL:

Estas líneas extraen parámetros de la URL actual.

  • let params = new URLSearchParams(document.location.search);: Crea un objeto URLSearchParams a partir de la cadena de consulta de la URL actual.
  • let id = params.get("id");: Obtiene el valor del parámetro "id" de la URL.

Selección de Elementos del DOM:

  • const details_container = document.getElementById("product-details");: Selecciona el contenedor en el que se mostrarán los detalles del producto.

Limpieza del Contenedor de Detalles:

Este bucle elimina todos los hijos del contenedor de detalles para asegurarse de que esté vacío antes de agregar nuevos detalles.

  • while (details_container.firstChild) {...}: Mientras el contenedor tenga un hijo, lo elimina.

Función asyncDetails:

Esta es una función asíncrona que obtiene detalles de un producto específico de la API y los muestra.

  • let asyncDetails = async function () {...}: Define la función asíncrona.
    • const response = await fetch(apiUrl);: Hace una solicitud a la API para obtener datos.
    • const apiProducts = await response.json();: Convierte la respuesta de la API en formato JSON.
    • let filteredProduct = apiProducts.celulares.filter(info => info.id == id): Filtra el producto específico usando el ID extraído de la URL.
    • let productDetails = filteredProduct[0]: Obtiene el producto filtrado.
    • let detailsContent = \...``: Crea el contenido HTML para mostrar los detalles del producto.
    • details_container.innerHTML = detailsContent: Inserta el contenido HTML en el contenedor de detalles.

Manejo de Errores:

Si hay un error al intentar obtener o procesar los detalles del producto, se muestra un mensaje de error.

  • catch (error) {...}: Captura errores que puedan ocurrir durante la ejecución de la función asíncrona.

Ejecución de la Función:

  • asyncDetails();: Ejecuta la función asyncDetails para obtener y mostrar los detalles del producto cuando se carga el archivo.

Esta explicación proporciona una visión general del código. Si tienes alguna pregunta específica sobre una parte en particular, no dudes en preguntar.

Clone this wiki locally