How to loop through an array of objects in a Svelte template?

Question

How do we pass an array to a Svelte template and loop over the contents?

My main.js looks like:

import App from './App.html';

const app = new App({
  target: document.body,
  data: [{name: 'hello'}, { name: 'world'}]
});

export default app;

My App.html file looks like:

{#each cats as cat}
    <h1>Hello {cat.name}!</h1>
{/each}

<style>
    h1 {
        color: purple;
    }
</style>

This seems like it should work.. but nothing appears. I've tried double curly braces as well for the each template.

Rich Harris · Accepted Answer · 2018-08-29 13:50:53Z

7

Your data should be an object that contains an array, it can't just be an array. So for that template, this:

import App from './App.html';

const app = new App({
  target: document.body,
  data: {
    cats: [{name: 'hello'}, { name: 'world'}]
  }
});

answered Aug 29, 2018 at 13:50

Rich Harris

29.8k3 gold badges92 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1