# Sort Observable variables

**URL:** <https://forums.fusetools.com/t/sort-observable-variables/6160>\
**Category:** How-to Discussions\
**Created:** [April 27, 2016, 9:50pm UTC](https://forums.fusetools.com/t/sort-observable-variables/6160 "2016-04-27T21:50:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy1](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy1/32/480_2.png) [@Cristian\_Karmy1](https://forums.fusetools.com/u/Cristian_Karmy1)\
**Post date:** [April 27, 2016, 9:50pm UTC](https://forums.fusetools.com/t/sort-observable-variables/6160/1 "2016-04-27T21:50:41Z")

</div>

Hi,

I have an Observable `MyObservable` that have many of this inside:

```auto
function Object(Text, Number) {
    this.O1 = O1;
    this.O2 = O2;
}

```

Then I display this on my app like:

```auto
<Each Items="{MyObservable}">
    <Text Value="{Text}" />
</Each>

```

Its posible to sort the elements inside `MyObservable` by the `Number` value?

---

<div class="post-metadata">

**Author:** ![COCPORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cocporn/32/576_2.png) [@COCPORN](https://forums.fusetools.com/u/COCPORN)\
**Post date:** [April 28, 2016, 12:20pm UTC](https://forums.fusetools.com/t/sort-observable-variables/6160/2 "2016-04-28T12:20:17Z")

</div>

Try something like this:

```auto
<App Theme="Basic">
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        function Number(text, number) {
            this.text = text;
            this.number = number;
        }
        var numbers = Observable();

        var sortedNumbers = Observable(function () {
            var array = numbers.toArray();
            array.sort(function (a, b) {
                return a.number - b.number;
            });
            var sorted = Observable();
            sorted.replaceAll(array);
            return sorted;
        }).inner();

        numbers.add(new Number('nine', 9));
        numbers.add(new Number('1337', 1337));
        numbers.add(new Number('one', 1));
        numbers.add(new Number('seven', 7));
        numbers.add(new Number('two', 2));

        module.exports = {
            sortedNumbers : sortedNumbers
        }

    </JavaScript>
    <ScrollView>
        <StackPanel>
            <Each Items="{sortedNumbers}">
                <Text Value="{text}" />
            </Each>
        </StackPanel>
    </ScrollView>
</App>

```

It returns a list:

```auto
one
two
seven
nine
1337

```

It is obviously(?) not the most efficient implementation as any addition to `numbers` will completely recreate `sortedNumbers`, but it seems to work. It might be possible to rewrite this to use `refreshAll`, but I’m not familiar with it. JavaScript and/or Fuse-ninjas, please contribute to make this example better.