# UX: Display last item in list

**URL:** <https://forums.fusetools.com/t/ux-display-last-item-in-list/2847>\
**Category:** How-to Discussions\
**Created:** [June 25, 2016, 2:29am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847 "2016-06-25T02:29:37Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [June 25, 2016, 2:29am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/1 "2016-06-25T02:29:37Z")

</div>

I need to show only the last item in a list in my ux, so I made a function like this:

```auto
module.exports = {
    ...

    lastItem: function (arg) { return arg.data.list.getAt(arg.data.list.length - 1).thing },

    ...
}

```

```auto
    ...
    <Text Value="{lastItem}" />
    ...

```

Assuming all the context is correct (i’ve simplified this from a more complex data structure with `<Each>` tags, why is my output in preview: `Fuse.Scripting.V8.Function`

IF I set the function out like this:

```auto
var lastItem = function() {
    return "anything";
}

```

it STILL doesn’t work, BUT:

```auto
var lastItem = Observable(function() {
    return "anything";
}

```

DOES WORK.

Finally,

```auto
var lastItem = Observable(function(arg) {
    return arg.data.list.getAt(arg.data.list.length - 1).thing;
}

```

Actually just crashes because the `arg` never ‘reaches’ the function. While I CAN just make a value built into the data structure that is equal to the last value, it’s a pain to implement this because I have to get it saved and then load it, and deal with all the bugs that come with that and also I would need to constantly be updating it, why can’t I use a function like this?

Thanks

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [June 27, 2016, 4:54pm UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/2 "2016-06-27T16:54:42Z")

</div>

Hi,

This function gives you an observable of the last item in another observable:

```auto
function last(obs)
{
    return Observable(function() {
        return obs.getAt(obs.length-1);
    })
}

```

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [June 27, 2016, 5:50pm UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/3 "2016-06-27T17:50:49Z")

</div>

Hey,

That function still shows up as `Fuse.Scripting.V8.Function` in the UX. ☹

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [June 30, 2016, 8:04pm UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/4 "2016-06-30T20:04:50Z")

</div>

bump. This has been marked as solved but it hasn’t ☹

---

<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:** [July 1, 2016, 2:31am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/5 "2016-07-01T02:31:08Z")

</div>

I believe this should be simpliefied to:

```auto
function last(obs) {
    return Observable(obs.getAt(obs.length-1));
}

```

The thing is @Fudge what is in your observable, functions?

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 1, 2016, 7:50am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/6 "2016-07-01T07:50:21Z")

</div>

Edwin’s answer is not correct.

My answer above is correct. If it doesn’t work, there must be something else wrong. Can you provide a full test case please?

---

<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:** [July 1, 2016, 7:52am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/7 "2016-07-01T07:52:28Z")

</div>

Oh because he wants one that is always tied to the observable being passed right @Anders ?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [July 1, 2016, 8:12am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/8 "2016-07-01T08:12:10Z")

</div>

Made a little test app on the topic, maybe this helps.

```auto
<App>
    <JavaScript>
    var Observable = require('FuseJS/Observable');

    var last_id = 1;
    function Item(title) {
        this.id = last_id;
        this.title = title;
        last_id++;
    };

    var list = Observable();
    list.add(new Item('test one'));
    list.add(new Item('test two'));
    list.add(new Item('test three'));

    function addItem() {
        var tmp = list.toArray();
        tmp.push(new Item('new item ' + (last_id)));
        list.replaceAll(tmp);
    };

    function delItem(args) {
        list.forEach(function(item,index) {
            if (item.id == args.data.id) list.removeAt(index);
        });
    };

    var last = list.map(function(item, index) {
        return {'item':item,'index':index};
    }).where(function(obj) {
        if (obj.index == (list.length - 1)) return true;
        return false;
    }).map(function(obj) {
        return obj.item;
    });

    module.exports = {
        'list': list,
        'last': last,
        'addItem': addItem,
        'delItem': delItem
    };
    </JavaScript>
    <ClientPanel Background="#eee">
        <Grid Rows="auto,1*">
            <Panel>
                <StackPanel>
                    <Panel Height="80">
                        <Panel Width="70%" Height="50" Background="#999" HitTestMode="LocalBoundsAndChildren">
                            <Text Alignment="Center" Value="Add item" />
                            <Clicked>
                                <Callback Handler="{addItem}" />
                            </Clicked>
                        </Panel>
                    </Panel>
                    <Panel Height="80">
                        <Grid Columns="1*,10,1*" Width="70%">
                            <Text Alignment="CenterRight" Value="Last item:" />
                            <Panel />
                            <Text Alignment="CenterLeft" Value="{last.title}" />
                        </Grid>
                    </Panel>
                </StackPanel>
            </Panel>
            <StackPanel ItemSpacing="1">
                <Each Items="{list}">
                    <DockPanel Background="#fff" Height="50">
                        <Text Alignment="Center" Value="{title}" />
                        <Panel Dock="Right" Width="50" HitTestMode="LocalBoundsAndChildren">
                            <Text Alignment="Center" Value="Del" />
                            <Clicked>
                                <Callback Handler="{delItem}" />
                            </Clicked>
                        </Panel>
                    </DockPanel>
                </Each>
            </StackPanel>
        </Grid>
    </ClientPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [July 1, 2016, 2:45pm UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/9 "2016-07-01T14:45:20Z")

</div>

Thanks for the answers.

I feel like I should clarify here, the context is all coming from the UX and the function is being used like this:

```auto
<Text Value="{last}" />

```

Here’s a test case:

```auto
<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        function myItem() {
            this.subList = Observable("wrong", "wrong", "correct");
        }

        var myList = Observable(new myItem, new myItem, new myItem);

        function last(obs) {
            return Observable(function() {
                return obs.subList.getAt(obs.subList.length-1);
            });
        }

        module.exports = {
            myList: myList,
            last: last
        }
    </JavaScript>

    <DockPanel>
        <Each Items="{myList}">
            <Text Value="{last}" Dock="Top" Margin="20" />
        </Each>
    </DockPanel>

</App>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 1, 2016, 2:51pm UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/10 "2016-07-01T14:51:23Z")

</div>

You have to call the `last` function with the observable in question. Now you are just exporting the function.

```auto
module.exports = {
    myList: myList,
    last: last(myList)
}

```

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [July 1, 2016, 2:54pm UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/11 "2016-07-01T14:54:05Z")

</div>

Hey,

Does the function need to be changed too? Now I get no output at all

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 2, 2016, 9:58am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/12 "2016-07-02T09:58:24Z")

</div>

Yes, please use the function exactly as I originally wrote it.

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [July 2, 2016, 1:04pm UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/13 "2016-07-02T13:04:30Z")

</div>

I did, it doesn’t work, even without trying to access the sublist, please try running the minimal test case and getting “correct” to display

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 4, 2016, 9:11am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/14 "2016-07-04T09:11:55Z")

</div>

Upon reading your code closer, you are not trying to display the last item of a list, you are trying to display _the last item in each list in a list_. That complicates things a little

To do that, do a `map` using the `last`-function:

```auto
module.exports = {
    list: myList.map(last)
}

```

Then simply `Each` over `list` and display `{}`

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [July 5, 2016, 1:37am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/15 "2016-07-05T01:37:18Z")

</div>

Hi,

Sorry this has dragged out, but can you please run my minimal example case? It just doesn’t seem to work for me when I add in your code.

Thanks

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 5, 2016, 8:15am UTC](https://forums.fusetools.com/t/ux-display-last-item-in-list/2847/16 "2016-07-05T08:15:50Z")

</div>

Hi,

This code works:

```auto
<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        function myItem() {
            this.subList = Observable("wrong", "wrong", "correct");
        }

        var myList = Observable(new myItem, new myItem, new myItem);

        function last(obs) {
            return Observable(function() {
                return obs.getAt(obs.length-1);
            });
        }

        module.exports = {
            myList: myList.map(function(x) { return last(x.subList); })
        }
    </JavaScript>

    <DockPanel>
        <Each Items="{myList}">
            <Text Value="{}" Dock="Top" Margin="20" />
        </Each>
    </DockPanel>

</App>

```