Renderizar Muitos a Partir de Um

Escrever HTML manualmente para cada serviço não escala. Se você tiver 50 serviços, precisaria de 50 cópias da mesma marcação. O bloco {#each} do Svelte resolve isso — escreva o template uma vez, renderize-o para cada item em um array.

O Que Você Vai Aprender

Usar {#each} para iterar sobre arrays
Acessar dados do item e o índice
Renderizar listas dinâmicas a partir de dados

O Bloco Each Básico

A sintaxe {#each} itera sobre um array:

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

Para cada elemento em array, o Svelte renderiza o conteúdo dentro do bloco, com item representando o elemento atual.

Um Exemplo Simples

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

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

Saída:

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

Três itens no array, três elementos <li> renderizados.

Renderizar Serviços do BookIt

Vamos aplicar isso à página de serviços:

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

Um template, três cards de serviço. Adicione mais serviços ao array, e mais cards aparecem automaticamente.

Acessando o Índice

Às vezes você precisa da posição de cada item. Adicione um 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 é baseado em zero (0, 1, 2...), então adicione 1 para numeração de exibição (1, 2, 3...).

Desestruturação no Each

Se você precisar apenas de certas propriedades, desestruture diretamente:

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

Isso mantém o template mais limpo quando você não precisa de todas as propriedades.

Arrays Vazios

O que acontece com um array vazio?

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

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

Nada é renderizado. O bloco each simplesmente produz zero iterações. Combine com {#if} para estados vazios:

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

Ou use o {:else} diretamente no bloco each:

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

O {:else} dentro do {#each} é acionado quando o array está vazio.

Iterando Sobre Objetos

Para iterar sobre as entradas de um 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() converte o objeto em um array de pares [key, value].

Blocos Each Aninhados

Você pode aninhar loops para dados complexos:

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

O loop externo itera sobre as categorias; o loop interno itera sobre os serviços dentro de cada categoria.

Nota de Performance

Blocos each são re-renderizados quando o array muda. Para listas grandes ou atualizações frequentes, o Svelte precisa de ajuda para identificar quais itens foram alterados. É aí que entram as chaves — abordadas na próxima lição.

Erros Comuns

Esquecer a Palavra-chave `as`

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

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

Tratar Cada Item como o 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}

Modificando o Array Dentro do Each

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

Modificar um array durante a iteração pode causar comportamento inesperado. Acione as atualizações após o bloco, não dentro dele.

Resumo

O bloco {#each} transforma arrays em marcação renderizada. Escreva o template uma vez, e o Svelte o repete para cada item. Combinado com condicionais, você pode construir interfaces dinâmicas orientadas a dados.

Principais conclusões:

{#each array as item} itera sobre arrays
Adicione , index para acesso à posição
Use {:else} em blocos each para lidar com estado vazio

Próximos Passos

À medida que os arrays mudam — itens adicionados, removidos, reordenados — o Svelte precisa saber qual item é qual. Continue com Por que as Keys Importam para aprender sobre blocos each com chave.