Renderizar Muchos desde Uno

Escribir HTML manualmente para cada servicio no escala. Si tienes 50 servicios, necesitarías 50 copias del mismo marcado. El bloque {#each} de Svelte resuelve esto — escribe la plantilla una vez y renderízala para cada elemento de un array.

Lo que Aprenderás

Usar {#each} para iterar sobre arrays
Acceder a los datos del elemento y al índice
Renderizar listas dinámicas a partir de datos

El Bloque Each Básico

La sintaxis {#each} itera sobre un array:

{#each array as item}
  <p>{item}</p>
{/each}

Para cada elemento en array, Svelte renderiza el contenido dentro del bloque, donde item representa el elemento actual.

Un Ejemplo Simple

<script>
  const fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

Salida:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Tres elementos en el array, tres elementos <li> renderizados.

Renderizar Servicios de BookIt

Apliquemos esto a la página de servicios:

<!-- filename: src/routes/services/+page.svelte -->
<script>
  const services = [
    {
      id: '1',
      slug: 'lawn-mowing',
      name: 'Lawn Mowing',
      description: 'Professional lawn mowing service.',
      price: 50,
      duration: 60
    },
    {
      id: '2',
      slug: 'hedge-trimming',
      name: 'Hedge Trimming',
      description: 'Expert hedge and shrub trimming.',
      price: 75,
      duration: 90
    },
    {
      id: '3',
      slug: 'garden-consultation',
      name: 'Garden Consultation',
      description: 'One-on-one garden planning advice.',
      price: 100,
      duration: 60
    }
  ];
</script>

<h1>Our Services</h1>

<div class="services-grid">
  {#each services as service}
    <article class="service-card">
      <h2>{service.name}</h2>
      <p>{service.description}</p>
      <p class="price">${service.price}</p>
      <p class="duration">{service.duration} minutes</p>
      <a href="/services/{service.slug}">View Details</a>
    </article>
  {/each}
</div>

Una plantilla, tres tarjetas de servicio. Agrega más servicios al array y aparecerán más tarjetas automáticamente.

Acceder al Índice

A veces necesitas la posición de cada elemento. Agrega un segundo parámetro:

{#each services as service, index}
  <article class="service-card">
    <span class="number">{index + 1}</span>
    <h2>{service.name}</h2>
    <!-- ... -->
  </article>
{/each}

index es de base cero (0, 1, 2...), así que suma 1 para la numeración de visualización (1, 2, 3...).

Desestructuración en Each

Si solo necesitas ciertas propiedades, desestructura directamente:

{#each services as { name, price, slug }}
  <div class="service-preview">
    <h3>{name}</h3>
    <span>${price}</span>
    <a href="/services/{slug}">Details</a>
  </div>
{/each}

Esto mantiene la plantilla más limpia cuando no necesitas todas las propiedades.

Arrays Vacíos

¿Qué ocurre con un array vacío?

<script>
  const services = [];
</script>

{#each services as service}
  <p>{service.name}</p>
{/each}

No se renderiza nada. El bloque each simplemente produce cero iteraciones. Combínalo con {#if} para los estados vacíos:

{#if services.length > 0}
  {#each services as service}
    <article class="service-card">
      <!-- ... -->
    </article>
  {/each}
{:else}
  <p>No services available.</p>
{/if}

O usa {:else} directamente en el bloque each:

{#each services as service}
  <article class="service-card">
    <!-- ... -->
  </article>
{:else}
  <p>No services available.</p>
{/each}

El {:else} dentro de {#each} se activa cuando el array está vacío.

Iterar sobre Objetos

Para iterar sobre las entradas de un objeto:

<script>
  const categories = {
    'lawn-care': 'Lawn Care',
    'tree-care': 'Tree Care',
    'consultation': 'Consultation'
  };
</script>

{#each Object.entries(categories) as [key, value]}
  <button data-category={key}>{value}</button>
{/each}

Object.entries() convierte el objeto en un array de pares [key, value].

Bloques Each Anidados

Puedes anidar bucles para datos complejos:

<script>
  const categorizedServices = [
    {
      category: 'Lawn Care',
      services: ['Lawn Mowing', 'Lawn Fertilizing']
    },
    {
      category: 'Tree Care',
      services: ['Tree Pruning', 'Tree Removal']
    }
  ];
</script>

{#each categorizedServices as group}
  <section>
    <h2>{group.category}</h2>
    <ul>
      {#each group.services as service}
        <li>{service}</li>
      {/each}
    </ul>
  </section>
{/each}

El bucle externo itera sobre las categorías; el bucle interno itera sobre los servicios dentro de cada categoría.

Nota sobre el Rendimiento

Los bloques each se vuelven a renderizar cuando el array cambia. Para listas grandes o actualizaciones frecuentes, Svelte necesita ayuda para identificar qué elementos cambiaron. Ahí es donde entran las claves — tema que se cubre en la siguiente lección.

Errores Comunes

Olvidar la Palabra Clave `as`

<!-- ❌ Missing 'as' -->
{#each services service}

<!-- ✅ Correct -->
{#each services as service}

Tratar Cada Elemento como el Array

<!-- ❌ Wrong: 'service' is one item, not the array -->
{#each services as service}
  <p>Total: {service.length}</p>
{/each}

<!-- ✅ Correct: access properties of the current item -->
{#each services as service}
  <p>{service.name}</p>
{/each}

Modificar el Array Dentro de Each

<!-- ❌ Don't mutate during iteration -->
{#each services as service, index}
  <button onclick={() => services.splice(index, 1)}>Delete</button>
{/each}

Modificar un array mientras se itera puede causar comportamientos inesperados. Dispara las actualizaciones después del bloque, no dentro de él.

Resumen

El bloque {#each} transforma arrays en markup renderizado. Escribe la plantilla una vez, y Svelte la repite para cada elemento. Combinado con condicionales, puedes construir interfaces dinámicas y orientadas a datos.

Puntos clave:

{#each array as item} itera sobre arrays
Agrega , index para acceder a la posición
Usa {:else} en los bloques each para manejar el estado vacío

Próximos Pasos

A medida que los arrays cambian — elementos agregados, eliminados, reordenados — Svelte necesita saber cuál elemento es cuál. Continúa con Por Qué Importan las Keys para aprender sobre los bloques each con clave.