How to iterate over a linked list in Svelte? (Or how to use a while loop / recursion?) #13159

Saad5400 · 2024-09-07T03:00:27Z

Saad5400
Sep 7, 2024

As the title, in my case I need a Linked List (to represent an interactive flowchart)

But I'm not sure how I can iterate over it to display it as html elements.

I know that I can with either a while loop or a recursive function, but how to do so with Svelte? I really don't want to use React ...

Answered by brunnerh

You can wrap the iteration logic in a generator function and use that in #each.

E.g. if the items have the shape { value, next } and end with next being null:

function* iterate(list) {
    let current = list;
    while (current != null) {
        yield current.value;
        current = current.next;
    }
}

{#each iterate(list) as item}
    <div>{item}</div>
{/each}

brunnerh · 2024-09-07T07:16:14Z

You can wrap the iteration logic in a generator function and use that in #each.

E.g. if the items have the shape { value, next } and end with next being null:

function* iterate(list) {
    let current = list;
    while (current != null) {
        yield current.value;
        current = current.next;
    }
}

{#each iterate(list) as item}
    <div>{item}</div>
{/each}

1 reply

Thanks!!