This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

---
title: Svelte 'each' Blocks - Loop Through an Array and Update a DOM
description: Using Svelte Each Blocks to Iterate a List
privateVideoUrl: https://fullstack.wistia.com/medias/czy6j1mwhi
isPublicLesson: false
code: https://gitlab.com/fullstackio/books/newline-course-apps/blair-googer-fullstack-svelte-app/-/tree/main/code_postgres_(author_original)/module_05/lesson_02/App
---

### Svelte Each Blocks

Previously, we set up the `LunchMenuAdmin` component to fetch data from our back end, but we didn't show the data to users in a friendly format. Since we are fetching an array (a list) of `lunchWeek` objects, we can use a Svelte `each` block to loop through the array and update the DOM with the results.

Take the example `const myList = ['Apple', 'Orange', 'Kiwi']`. We can use a Svelte `each` block to loop through the array and display the fruit:

```html
<ul>
  {#each myList as fruit}
  <li>{fruit}</li>
  {/each}
</ul>
```

This will translate to the following markup for the browser:

```html
<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Kiwi</li>
</ul>
```

Let's apply this concept to our `lunchWeekList` in `LunchMenuAdmin.svelte`. Instead of using an unordered list, we'll use a table. The `each` block will be wrapped around the table rows after the header:

```html
<div>
  <nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/admin/manage-menus">Lunch Menu Administration</a>
      </li>
      <li class="is-active">
        <a href="/#">{$user.schoolName}</a>
      </li>
    </ul>
  </nav>
  <table>
    <thead>
      <tr>
        <th>Week Of</th>
        <th>Published</th>
      </tr>
    </thead>
    {#each lunchWeekList as lunchWeek}
    <tr>
      <td>{lunchWeek.weekOf}</td>
      <td>{lunchWeek.isPublished}</td>
    </tr>
    {/each}
  </table>
</div>
```

![plain-table](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_06/lesson_06.02/public/plain-table.png)

It's looking better, but we haven't applied our [Bulma table class](https://bulma.io/documentation/elements/table/) yet. Just add `class="table"` to the table element:



```html
<table class="table">
```

Even better, but it's not interactive yet. When an admin user views this data, they will need to be able to click on a given week and view or update lunch details for that week. We can add a click handler to each of the rows, and route the user to a new "Lunch Menu Admin Details" component.

Each `lunchWeek` object has a `lunchWeekId` property (1, 2, 3, etc). We can use this property to build a route convention that makes hierarchical sense, e.g.:

-   `/admin/manage-menus` --> route to the `LunchMenuAdmin.svelte` component
-   `/admin/manage-menus/week-details/1` --> route to a new `LunchMenuAdminDetails.svelte` component were we can view/update the details for the `lunchWeek` entity where `lunchWeekId = 1`.

Let's stub out a new `LunchMenuAdminDetails.svelte` file:

```html { actualFilename=../../../code/module_05/lesson_02/school-lunch/frontend/src/views/admin/LunchMenuAdminDetails.svelte endChar=382 endLine=20 startChar=0 startLine=1 statedFilename=LunchMenuAdminDetails.svelte url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_06/lesson_06.02/.../../code/module_05/lesson_02/school-lunch/frontend/src/views/admin/LunchMenuAdminDetails.svelte }
<script>
  import { user } from '../../stores.js'
</script>

<div>
  <nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/admin/manage-menus">Lunch Menu Administration</a>
      </li>
      <li class="is-active">
        <a href="/#">{$user.schoolName}</a>
      </li>
    </ul>
  </nav>
</div>
```

Using Svelte Each Blocks to Iterate a List