Guías Técnicas

Cómo consumir data desde un archivo JSON con Svelte

Una tarea muy común es consumir información desde un archivo JSON y mostrar los datos almacenados en un archivo JSON en un componente Svelte. Para ello, utilizaremos la API Fetch para cargar el archivo JSON y luego mostrar los datos en el componente.

Paso 1: Crear el archivo JSON

Primero, necesitamos un archivo JSON que contenga los datos que vamos a consumir. Imaginemos un archivo llamado data.json con la siguiente estructura:

json 
[
{
  "id": 1,
  "nombre": "Urian Viera",
  "telefono": "+1234567890"
},
{
  "id": 2,
  "nombre": "Brenda Viera",
  "telefono": "+0987654321"
},
{
  "id": 3,
  "nombre": "Uriany Viera",
  "telefono": "+1122334455"
},
  {
  "id": 4,
  "nombre": "Any Somosa",
  "telefono": "+1100334488"
}
]

Este archivo contiene una lista de personas, cada una con un id, un nombre y un telefono.

Paso 2: Crear el componente Svelte

Ahora que tenemos el archivo JSON con los datos, vamos a crear un componente Svelte que consuma estos datos. El componente tendrá la siguiente estructura:

js 
<script>
// Importa el ciclo de vida  onMount de Svelte 
import { onMount } from 'svelte';
let personas = []; // Array para almacenar los datos

// Cargar los datos al montar el componente
onMount(async () => {
  const response = await fetch('/data.json'); // Asumiendo que el archivo .json está en la raíz pública
  personas = await response.json();
  console.log(personas);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  margin-top: 50px;
  list-style: none;
}
li {
  display: flex;
  justify-content: space-between;
}
</style>

<main>
<ul>
  {#each personas as persona}
    <li>
      <span>{persona.id}</span> <strong>{persona.nombre}</strong> <span>{persona.telefono}</span>
    </li>
  {/each}
</ul>
</main>
  Explicación del código

  1. Importación de onMount: Importamos el método onMount de Svelte, que nos permite ejecutar código cuando el componente se haya montado en el DOM.
  2. Cargar el archivo JSON: Usamos fetch('/data.json') para obtener el archivo JSON. Es importante que el archivo esté disponible en la carpeta pública de la aplicación.
  3. Almacenar los datos: Cuando los datos se cargan, se almacenan en el array personas usando await response.json().
  4. Mostrar los datos: Usamos un bucle each para iterar sobre el array personas y mostrar los datos de cada persona en una lista.

Paso 3: Asegúrate de que el archivo JSON esté accesible

El archivo data.json debe estar ubicado en la carpeta pública public de tu proyecto para que sea accesible desde la URL /data.json.

Paso 4: Ejecutar la aplicación

Una vez que hayas creado el componente y asegurado que el archivo JSON esté en el lugar correcto, puedes ejecutar tu aplicación Svelte y ver cómo los datos del archivo JSON se cargan dinámicamente y se muestran en la interfaz de usuario.

bash 
npm run dev

Con esto, la página debería mostrar una lista de personas, donde cada entrada contiene su id, nombre y telefono. Solo queda visitar la url http://localhost:5173/ para ver la lista de personas

  Conclusión

Svelte facilita la carga y visualización de datos desde archivos JSON mediante su API fetch y su enfoque reactivo. Esto te permite crear aplicaciones eficientes y fáciles de mantener al manejar datos externos de manera simple.