Merge pull request #113 from lliccien/main

Added Improved display of json in home and API query on full page load

api/wwwroot/css/moduleApi.css

@@ -133,6 +133,8 @@
   border-radius: 5px; /* Bordes redondeados */
   font-family: 'Krona One'; /* Fuente monoespaciada para mantener la estructura */
   line-height: 1.7; /* Espaciado entre líneas */
+  white-space: pre;  /* Preserva los espacio con elementos <br> */
+  width: fit-content; /* Ajusta el ancho al contenido */
 }
 
 

api/wwwroot/index.html

@@ -269,42 +269,7 @@ <h6>
         </div>
         <div class="api">
           <code class="resultado">
-              <p class="json-separator">{</p>
-              <br />
-              <span class="json-key">"id"</span>:
-              <span class="json-value">9</span>, <br />
-              <span class="json-key">"name"</span>:
-              <span class="json-value">"Caquetá"</span>, <br />
-              <span class="json-key">"description"</span>:
-              <span class="json-value"
-                >"Caquetá es uno de los treinta y dos departamentos que, junto
-                con Bogotá, Distrito Capital, forman la República de Colombia.
-                Su capital es Florencia. Está ubicado al sur del país, en la
-                región Amazonia, limitando al norte con Meta y Guaviare, al
-                noreste con Vaupés, al sur con Amazonas y Putumayo, y al oeste
-                con Cauca y Huila. Con 88 965 km² es el tercer departamento más
-                extenso —por detrás de Amazonas y Vichada—. Todos sus municipios
-                forman parte de los territorios focalizados"</span
-              >, <br />
-              <span class="json-key">"cityCapitalId"</span>:
-              <span class="json-value">364</span>,<br />
-              <span class="json-key">"municipalities"</span>:
-              <span class="json-value">16</span>,<br />
-              <span class="json-key">"surface"</span>:
-              <span class="json-value">88965</span>,<br />
-              <span class="json-key">"population"</span>:
-              <span class="json-value">419275</span>,<br />
-              <span class="json-key">"phonePrefix"</span>:
-              <span class="json-value">"8"</span>,<br />
-              <span class="json-key">"countryId"</span>:
-              <span class="json-value">1</span>,<br />
-              <span class="json-key">"cityCapital"</span>:
-              <span class="json-value">null</span>,<br />
-              <span class="json-key">"country"</span>:
-              <span class="json-value">null</span>,<br />
-              <span class="json-key">"cities"</span>:
-              <span class="json-value">null</span> <br />
-              <p>}</p>
+              <p>Cargando...</p>
             </code>
         </div>
       </div>

api/wwwroot/js/moduleApi.js

@@ -1,24 +1,24 @@
-const apiBaseUrl = 'https://api-colombia.com/api/';
+const apiBaseUrl = "https://api-colombia.com/api/";
 const cache = new Map(); // Mapeo para almacenar las respuestas en caché
 
 // Obtengo los elementos necesarios por su ID o clase
-const selectVersion = document.getElementById('selectVersion');
-const selectData = document.getElementById('selectData');
-const btnSolicitar = document.getElementById('btnSolicitar');
-const resultadoDiv = document.querySelector('.resultado');
+const selectVersion = document.getElementById("selectVersion");
+const selectData = document.getElementById("selectData");
+const btnSolicitar = document.getElementById("btnSolicitar");
+const resultadoDiv = document.querySelector(".resultado");
 
 async function fetchData(apiUrl) {
   try {
     // Verifico si la respuesta está en caché
     if (cache.has(apiUrl)) {
-      console.log('Datos obtenidos de la caché');
+      console.log("Datos obtenidos de la caché");
       return cache.get(apiUrl);
     }
 
     // Realizo la solicitud FETCH a la API
     const response = await fetch(apiUrl);
     if (!response.ok) {
-      throw new Error('Error en la solicitud: ' + response.statusText);
+      throw new Error("Error en la solicitud: " + response.statusText);
     }
 
     // Convierto la respuesta a JSON
@@ -29,18 +29,18 @@ async function fetchData(apiUrl) {
 
     return data;
   } catch (error) {
-    throw new Error('Error al obtener los datos: ' + error.message);
+    throw new Error("Error al obtener los datos: " + error.message);
   }
 }
 
 // Agrego un evento al botón de solicitar datos
-btnSolicitar.addEventListener('click', async function() {
+btnSolicitar.addEventListener("click", async function () {
   const version = selectVersion.value;
   const data = selectData.value;
-  let apiUrl = '';
+  let apiUrl = "";
 
-  if (data === 'CountryColombia') {
-    apiUrl = 'https://api-colombia.com/api/v1/country/Colombia';
+  if (data === "CountryColombia") {
+    apiUrl = "https://api-colombia.com/api/v1/country/Colombia";
   } else {
     apiUrl = `https://api-colombia.com/api/${version}/${data}`;
   }
@@ -50,8 +50,8 @@ btnSolicitar.addEventListener('click', async function() {
     console.log(responseData);
     resultadoDiv.innerText = JSON.stringify(responseData, null, 2);
   } catch (error) {
-    console.error('Error al obtener los datos:', error);
-    resultadoDiv.innerText = 'Error al obtener los datos';
+    console.error("Error al obtener los datos:", error);
+    resultadoDiv.innerText = "Error al obtener los datos";
   }
 });
 
@@ -63,19 +63,19 @@ async function fetchData(url) {
   return data;
 }
 
-
 // ESTE ES EL CONSUMO DE COUNTRY COLOMBIA EN LA CUAL DE MANERA ASINCRONA SE CONSUME
-btnSolicitar.addEventListener('click', async function() { // Agrego un evento al botón
+btnSolicitar.addEventListener("click", async function () {
+  // Agrego un evento al botón
   // Obtengo el valor de la versión y los datos seleccionados
   const version = selectVersion.value;
   const data = selectData.value;
 
   // Construyo la URL de la API basada en la versión y los datos seleccionados
-  let apiUrl = '';
+  let apiUrl = "";
 
   // Verificar si se seleccionó el nuevo endpoint
-  if (data === 'CountryColombia') {
-    apiUrl = 'https://api-colombia.com/api/v1/country/Colombia';
+  if (data === "CountryColombia") {
+    apiUrl = "https://api-colombia.com/api/v1/country/Colombia";
   } else {
     apiUrl = `${apiBaseUrl}${version}/${data}`;
   }
@@ -91,16 +91,30 @@ btnSolicitar.addEventListener('click', async function() { // Agrego un evento al
     resultadoDiv.innerText = JSON.stringify(responseData, null, 2);
   } catch (error) {
     // Aqui capturo y manejo los errores de la solicitud a la API
-    console.error('Error al obtener los datos:', error);
+    console.error("Error al obtener los datos:", error);
 
     // Muestro un mensaje de error en el div resultado cuando no se consuma correctamente
-    resultadoDiv.innerText = 'Error al obtener los datos';
+    resultadoDiv.innerText = "Error al obtener los datos";
   }
 });
 
-
 // ESTA FUNCIÓN ES PARA HACERLE SAER AL USUARIO QUE ENDPOINT SE ESTA CONSUMIENDO EN LA API
-document.getElementById('selectData').addEventListener('change', function() {
+document.getElementById("selectData").addEventListener("change", function () {
   var selectedOption = this.value;
-  document.getElementById('endpoint').textContent = selectedOption + "'";
+  document.getElementById("endpoint").textContent = selectedOption + "'";
+});
+
+// Ejecución del api luego de cargada la pagina htm completa
+document.addEventListener("DOMContentLoaded", async function () {
+  const apiUrl = "https://api-colombia.com/api/v1/department";
+
+  try {
+    const responseData = await fetchData(apiUrl);
+    console.log(responseData);
+    resultadoDiv.innerText = JSON.stringify(responseData, null, 2);
+  } catch (error) {
+    console.error("Error al obtener los datos:", error);
+    resultadoDiv.innerHTML =
+      "<p>No se encontraron datos. Vuelva a intentarlo</p>";
+  }
 });