# Showing Selected Object Data

**URL:** <https://forums.fusetools.com/t/showing-selected-object-data/5136>\
**Category:** How-to Discussions\
**Created:** [July 5, 2016, 4:19am UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136 "2016-07-05T04:19:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![asaxionis](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@asaxionis](https://forums.fusetools.com/u/asaxionis)\
**Post date:** [July 5, 2016, 4:19am UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136/1 "2016-07-05T04:19:34Z")

</div>

So I am trying to get the data from the clicked object and have it display. Currently I am able to display the title using the value property, but it will only display the first item in Object which is dog, and it says it for when I click cat as wel; What I want it to do, is display the name based on which button was clicked; so when I click on the cat circle, it will display cat rather than dog

```auto
function Animal(type, name) {
    this.type = type;
    this.name = name;
}

var selectionBreed = Observable(
    new Animal("Dog", "Harry"),
    new Animal("Cat", "Bob")
;

var selectedAnimal = Observable("");

function showSelectedAnimal() {
    selectedAnimal.value = selectionBreed.value.type;
}

var shownSelection = 

        selectionBreed

        .map(function(x) {
            return new Animal(x.type, x.name);
        });

```

And what this does is just display dog for both the animals.

The UX code looks like this…

```auto
<Each Items="{shownSelection}">
        <Circle Alignment="Center" Width="85" Height="85" Margin="35" Color="Red" Clicked="{showSelectedAnimal}"> 

                                <Stroke Width="2" Color="Black" />
                                <Text Alignment="Center" Value="{type}" />
                            </Circle>
                        </Each>

```

And then the next page I want to display the items on are

```auto
    <Panel Height="13%" Dock="Top" Color="#FFDAB9">
            <Text Alignment="Center" Layer="Overlay" Color="Black" Value="{selectedAnimal}"/> 

        </Panel>

```

---

<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 6, 2016, 7:24am UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136/2 "2016-07-06T07:24:43Z")

</div>

Hi!

All JS events gives you a parameter that contains the data of the item that generated the event:

```auto
function somethingHappened(e) { e.data <-- this is the data (animal, in your case)

```

---

<div class="post-metadata">

**Author:** ![asaxionis](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@asaxionis](https://forums.fusetools.com/u/asaxionis)\
**Post date:** [July 6, 2016, 1:37pm UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136/3 "2016-07-06T13:37:51Z")

</div>

> **Anders Lassen wrote:**
> 
> Hi!
> 
> All JS events gives you a parameter that contains the data of the item that generated the event:
> 
> ```uno
> function somethingHappened(e) { e.data <-- this is the data (animal, in your case)
> 
> ```

Thanks for the response! I’m just a little confuse, as to what you mean i’ve tried multiple combinations of using e.data and everything keeps crashing, is the data refrencing Animal.type so shownSelection? I apologize I’m just really confused, the last attempt i tried looked like this

selectedGenre.value = e.value.type;

---

<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:** [July 6, 2016, 1:48pm UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136/4 "2016-07-06T13:48:18Z")

</div>

Here you have a complete (although simple) example. (Sorry for posting code in screenshot-form, but this was something leftover from a previous proof of concept)

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/vZxv9b7b29Jl-legacy-files-s6XYVp3XTFUcfHTt-8lAqfkWmxTkcGFTXZEsNBb-p.png)

If this doesn’t provide enough help then it would be good if you could post a _complete_ (and minimal) case to reproduce the issue you’re seeing.

---

<div class="post-metadata">

**Author:** ![asaxionis](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@asaxionis](https://forums.fusetools.com/u/asaxionis)\
**Post date:** [July 6, 2016, 2:37pm UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136/5 "2016-07-06T14:37:20Z")

</div>

> **Remi Pedersen wrote:**
> 
> Here you have a complete (although simple) example. (Sorry for posting code in screenshot-form, but this was something leftover from a previous proof of concept)
> 
> ![file](https://canada1.discourse-cdn.com/flex035/uploads/fusetools1/original/2X/4/40eb7256190a8f495a81e47f00810bc374b03da7.png)
> 
> If this doesn’t provide enough help then it would be good if you could post a _complete_ (and minimal) case to reproduce the issue you’re seeing.

Perfect, thank you very much, i wasn’t understanding what the .data represented i thought that was supposed to be me calling the object; all is figured out now thank you!! I really love Fuse support, it really seperates it from many different services, thank you both for your time!

---

<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:** [July 6, 2016, 2:40pm UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136/6 "2016-07-06T14:40:11Z")

</div>

Great! Happy to help! 🙂

---

<div class="post-metadata">

**Author:** ![Tom1](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@Tom1](https://forums.fusetools.com/u/Tom1)\
**Post date:** [July 6, 2016, 4:38pm UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136/7 "2016-07-06T16:38:46Z")

</div>

Any example how to transist the page when clicked. Looking for example but couldn’t find it.

---

<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:** [July 7, 2016, 9:06am UTC](https://forums.fusetools.com/t/showing-selected-object-data/5136/8 "2016-07-07T09:06:04Z")

</div>

@krispassa: You should be able to find plenty of material on this in the [examples](https://www.fusetools.com/examples) and [docs](https://www.fusetools.com/docs/navigation/navigation#custom-animations-transitions). 🙂