Is it possible to reverse the order in which the items are displayed in svelte's {#each ...} block?

I want this for an array of object, sorted by id, where the oldest entry es first. And I want to display the newest entry first.

Edit: To illustrate what happens when using the .reverse() solution, here the 'before' and 'after' transition screens:

Is it possible to reverse the order in which the items are displayed in svelte's {#each ...} block?

I want this for an array of object, sorted by id, where the oldest entry es first. And I want to display the newest entry first.

Edit: To illustrate what happens when using the .reverse() solution, here the 'before' and 'after' transition screens:

• javascript
• svelte-3

Share Improve this question Follow edited Dec 18, 2019 at 14:36 Ad Rienks asked Dec 18, 2019 at 13:59 Ad RienksAd Rienks 41011 gold badge77 silver badges1515 bronze badges 1

• I have an alternative maybe; to first reverse the original array before it is fed to the {#each ..} block, but I thought that it could be easier to do the reversing while it is displayed. – Ad Rienks Commented Dec 18, 2019 at 14:04

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

Looking at the docs I tried:

<script>
    let cats = [
        { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
        { id: 'z_AbfPXTKms', name: 'Maru' },
        { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
    ];
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
    {#each [...cats].reverse() as { id, name }, i}
        <li><a target="_blank" href="https://www.youtube./watch?v={id}">
            {i + 1}: {name}
        </a></li>
    {/each}
</ul>

Seems to work... Try it here

The reason for the [...cats].reverse() is so that we avoid reversing the actual cats array and just reverse a copy

<script>
  // Sorted in A-Z
  const arr = ['Affectionate', 'Candid', 'Synthetic Heart', 'Your Eyes', 'Yours,Truly'];
</script>

<ol>
  {#each { length: arr.length } as _, index}
    {@const reverseIndex = arr.length - 1 - index}
    {@const value = arr[reverseIndex]}
    <!-- Shown in Z-A -->
    <li>{value}</li>
  {/each}
</ol>

<!-- 
 1. Yours,Truly
 2. Your Eyes
 3. Synthetic Heart
 4. Candid
 5. Affectionate
-->

Demo. Instead of creating another array with Array.reverse(), how about using reverse index and its value.

the svelte 5 easier way

<script>
    let cats = [
        { id: 'J---aiyznGQ', name: 'Keyboard Cat' },
        { id: 'z_AbfPXTKms', name: 'Maru' },
        { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' },
    ]
    function* items() {
        for (let i = cats.length - 1; i >= 0; i--) {
            yield cats[i]
        }
    }
</script>

<h1>The Famous Cats of YouTube</h1>

<ul>
    {#each items() as { id, name }, id}
        <li>
            <a target="_blank" href="https://www.youtube./watch?v={id}">
                {i + 1}: {name}
            </a>
        </li>
    {/each}
</ul>

The answer is that it is difficult, maybe impossible, to implement a solution by tweeking in the {#each}. Like dbramwell suggested, I do the work in the script. The code might need some improvement/refactoring!

function reverseTodos() {
    let indexArr = [];
    for (const todo of todos) {
      indexArr.push(todo.id);
    }
    indexArr.reverse();

    let myNewArr = [];
    for (let i = 0; i < todos.length; i++) {
      myNewArr[i] = {
        id: indexArr[i],
        todo: todos[i].todo,
        checkbox: todos[i].checkbox
      };
    }
    return myNewArr.reverse();
  }

  $: reversedTodos = reverseTodos();

And then I feed reversedTodos to the {#each} block.