Each Logic in Svelte – DZone Web Dev


Previously, I covered how if-else logic works in Svelte. Today, I’ll be going over how to use each logic in Svelte, letting us iterate over objects to display their contents.

If you’re new to Svelte, read my guide on how to create your first Svelte project here.

Motivation for each Logic in Svelte

Let’s say we are making a component in Svelte, as covered in my guide on Svelte components. We have a set of data and some basic CSS. In Svelte, this looks like a normal HTML/CSS/Javascript file:

<script>
    let locations = [ 
        
            country: "UK",
            city: "London",
        ,
        
            country: "India",
            city: "Mumbai"
        ,
        
            country: "France",
            city: "Paris"
        
    ];
</script>

<div id="data">

</div>

<style>
    #data 
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    
</style>

Without Svelte, if we want to display all of that data, we would have to make a loop through it and generate the HTML with JavaScript. With Svelte, it’s much easier to loop through data – we simply use #each logic.

How each Logic in Svelte Works

With eachWe can take our #data div and iterate through our locations object right within it.

The each loop in Svelte has the following syntax:

Essentially, we can deconstruct our location’s function into however many properties we want to display. If we wanted to only show the country, we could write #each locations as country , i.

We can even entirely leave out iAnd just write #each locations as country, city .

Using each Logic in Svelte

Let’s look at an example. Below, I’ve turned our location list into HTML using each logic:

The above code will produce the following output:

1: UK, London
2: India, Mumbai
3: France, Paris

Svelte makes this super easy and gives us the flexibility to leave data out. For example, here is an example displaying country only, with no index:

The above code will produce the following output:

UK
India
France

Keyed each Blocks in Svelte

If we want to access the entire object, Svelte also gives us that option. For example, instead of writing #each locations as country, city, iWe can simply write:

Let’s look at an example. The code below works exactly the same as in previous examples, but instead of directly referencing country, we write location.country. Both ways are the same, so it’s up to you which you prefer to use. Some people prefer this version due to its simplicity as you don’t have to redefine constantly which elements from the object to use:

Keyed each Statements in Svelte

If you already have predefined identifiers, you can pass these to Svelte along with the index. The benefit of this is that if data should be updated or changed, you retain a strong link between the original data set, and Svelte will use it to diff the list if data changes, rather than adding or removing something to the end.

A good way to think about this is to tellg Svelte to map HTML elements to thatkey if you provide a  key. If the item with the key is removed, it will remove the DOM element. If the properties change for that key, then Svelte will update DOM element.

If instead, you don’t provide a key, Svelte goes off the array index. However, that can lead to some problems – if we remove an element from the start, for example, the first DOM element will simply be updated with properties from the “new” first item in the array. As such, it can be useful to use a unique key.

How to use Keyedeach Statements in Svelte

let locations = [ 
    
        id: "123-123-123",
        country: "UK",
        city: "London",
    ,
    
        id: "124-124-124",
        country: "India",
        city: "Mumbai"
    ,
    
        id: "125-125-125",
        country: "France",
        city: "Paris"
    
];

We could then define id as our unique key for each item. If we wanted to do that, it’d look like this:

#each locations as location, i (location.id)

Or, if we’re deconstructing, we could also write it like this:

#each locations as id, country, city, i (id)

Or finally, we can remove i altogether – and simply refer to id. This will let us use our id in code and also link the DOM element to our id property:

#each locations as id, country, city (id)

Using this in code, we can still achieve the same results, but we will have hard-linked our DOM elements to particular array elements:

<script>
let locations = [ 
    
        id: "123-123-123",
        country: "UK",
        city: "London",
    ,
    
        id: "124-124-124",
        country: "India",
        city: "Mumbai"
    ,
    
        id: "125-125-125",
        country: "France",
        city: "Paris"
    
];
</script>

<div id="data">
    #each locations as location, i (location.id)
        <div class="county-city">
            i + 1: location.country, location.city
        </div>
    /each
</div>

<style>
    #data 
        padding: 2rem;
        border-radius: 10px;
        border: 1px solid #eee;
    
</style>

each-else Statements in Svelte

We can define default behavior for an empty list using the :else statement. Simply define your #each statement as normal, and add it in after. It will only display if the list is empty.

Here is an example:



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Article

Sophos Interview Experience for Software Engineer 2021 - GeeksforGeeks

Next Article

BMW XM inline-six PHEV might come to European markets

Related Posts