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:

[
{
  "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:

<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>

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.

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