# Why does Each render items in reverse?

**URL:** <https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777>\
**Category:** Bug Reports\
**Created:** [August 28, 2016, 5:28pm UTC](https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777 "2016-08-28T17:28:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian/32/594_2.png) [@sebastian](https://forums.fusetools.com/u/sebastian)\
**Post date:** [August 28, 2016, 5:28pm UTC](https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777/1 "2016-08-28T17:28:25Z")

</div>

EDIT: This code example works, the one in my second post renders in reverse.

Fuse 0.24.0 (build 7243)

```auto
<JavaScript>
    var Observable = require("FuseJS/Observable")
    exports.listData = Observable(
        {year_nr: 2015},
        {year_nr: 2016},
        {year_nr: 2017}
    )
</JavaScript>

<StackPanel Color="#fff" ItemSpacing="1">
          
    <Each Items="{listData}">

        <Panel>
            <Text Color="#111" Value="{year_nr}" Alignment="CenterLeft" Margin="10,5,10,0" />
        </Panel>
    </Each>
</StackPanel>

```

EDIT: Changed color of text, and lost the code formatting in the post unfortunately ;D

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [August 29, 2016, 7:32am UTC](https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777/2 "2016-08-29T07:32:18Z")

</div>

I’m on the same version and it shows it in order, btw change the color of the text so we can actually see it

---

<div class="post-metadata">

**Author:** ![sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian/32/594_2.png) [@sebastian](https://forums.fusetools.com/u/sebastian)\
**Post date:** [August 29, 2016, 8:36am UTC](https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777/3 "2016-08-29T08:36:51Z")

</div>

Here is an example of the actual issue. The bug appears when you update an Observable that is empty:

```auto
<Page ux:Name="eventList" Background="#000">
    <JavaScript>
        var Observable = require("FuseJS/Observable")
        exports.listData = Observable()

        for (var i = 2015; i < 2100; i++) {
            exports.listData.add({year_nr: i, type: 'year'})
        }

        exports.listData.forEach(function (item) {
            console.log(JSON.stringify(item))
        })

    </JavaScript>

    <ScrollView>
        <StackPanel Color="#fff" ItemSpacing="1">
                
            <Each Items="{listData}">

                <Match Value="{type}">
                    <Case String="year">

                        <Panel>
                            <Text Color="#111" Value="{year_nr}" Alignment="CenterLeft" Margin="10,5,10,0" />
                        </Panel>

                    </Case>
                </Match>

            </Each>

        </StackPanel>
    </ScrollView>
</Page>

```

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [August 29, 2016, 1:46pm UTC](https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777/4 "2016-08-29T13:46:22Z")

</div>

Hi!

Thanks for reporting this bug! We have identified the bug and are working on a fix 🙂

---

<div class="post-metadata">

**Author:** ![sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/sebastian/32/594_2.png) [@sebastian](https://forums.fusetools.com/u/sebastian)\
**Post date:** [September 1, 2016, 3:22pm UTC](https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777/5 "2016-09-01T15:22:52Z")

</div>

This issue is fixed in 0.25 when enclosing list items in Deferred but appears to still be an issue when doing plain rendering.

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [September 1, 2016, 5:09pm UTC](https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777/6 "2016-09-01T17:09:43Z")

</div>

I believe the issue is triggered by having `Match` directly inside of `Each`, so you can basically work around it by wrapping the Match inside a Panel. (Or some other class, like the Deferred you used).

The fix Vegard mentioned is not in 0.25 but will be included in a later release.

---

<div class="post-metadata">

**Author:** ![Costin\_Bereveanu](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/costin_bereveanu/32/628_2.png) [@Costin\_Bereveanu](https://forums.fusetools.com/u/Costin_Bereveanu)\
**Post date:** [September 6, 2016, 7:39am UTC](https://forums.fusetools.com/t/why-does-each-render-items-in-reverse/6777/7 "2016-09-06T07:39:35Z")

</div>

Setting `<Each MatchKey="type">` (for this example) and thus getting rid of the Match did the trick for me.  
Cleaner code too 😉

[https://www.fusetools.com/docs/fuse/visual/templates](https://www.fusetools.com/docs/fuse/visual/templates)