Showing Selected Object Data

How-to Discussions
1

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

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…

<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

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

        </Panel>
2

Hi!

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

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

Anders Lassen wrote:

Hi!

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

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;

4

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
vZxv9b7b29Jl-legacy-files-s6XYVp3XTFUcfHTt-8lAqfkWmxTkcGFTXZEsNBb-p.png1383×1106

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.

5

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
file1383×1106 85.9 KB

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!

6

Great! Happy to help! :slight_smile:

7

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

8

@krispassa: You should be able to find plenty of material on this in the examples and docs. :slight_smile: