# Pass name of function from an array to \<Callback Handler

**URL:** <https://forums.fusetools.com/t/pass-name-of-function-from-an-array-to-callback-handler/4639>\
**Category:** How-to Discussions\
**Created:** [September 26, 2017, 7:34pm UTC](https://forums.fusetools.com/t/pass-name-of-function-from-an-array-to-callback-handler/4639 "2017-09-26T19:34:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eren](https://avatars.discourse-cdn.com/v4/letter/e/9d8465/32.png) [@Eren](https://forums.fusetools.com/u/Eren)\
**Post date:** [September 26, 2017, 7:34pm UTC](https://forums.fusetools.com/t/pass-name-of-function-from-an-array-to-callback-handler/4639/1 "2017-09-26T19:34:11Z")

</div>

Hello There,

I am keeping the name of functions to call from the UX in an array and want to use Callback Handler to initiate the functions.

It is something like this;

{ title: ‘Manuel Entry’, imaget: “Assets/map.png”, hyper: “loadqr”}

and I want to call the loadqr() function from the UX.

I know that I can call the function using \<Callback Handler, but what would the notation be ?

Thanks in advance,

---

<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:** [September 27, 2017, 9:31am UTC](https://forums.fusetools.com/t/pass-name-of-function-from-an-array-to-callback-handler/4639/2 "2017-09-27T09:31:18Z")

</div>

There are several approaches you could take to achieve what you’re after.

Approach one, in-line the functions in your objects:

```auto
<App>
    <JavaScript>
    var data = [
        {
            title: "One",
            color: "#18f",
            handler: function() {
                console.log("handler One");
            }
        },
        {
            title: "Two",
            color: "#f81",
            handler: function() {
                console.log("handler Two");
            }
        }
    ];
    module.exports = {
        data: data
    };
    </JavaScript>
    <StackPanel Alignment="VerticalCenter" ItemSpacing="4">
        <Each Items="{data}">
            <Panel Width="128" Height="48">
                <Clicked>
                    <Callback Handler="{handler}" />
                </Clicked>
                <Text Value="{title}" Alignment="Center" TextColor="#fff" />
                <Rectangle Color="{color}" CornerRadius="2" />
            </Panel>
        </Each>
    </StackPanel>
</App>

```

Approach two, use a global callback and switch on the parameters:

```auto
<App>
    <JavaScript>
    var data = [
        {
            title: "One",
            color: "#18f",
            handler: "one"
        },
        {
            title: "Two",
            color: "#f81",
            handler: "two"
        }
    ];

    function proxy(args) {
        switch (args.data.handler) {
            case "one":
                execOne();
                break;
            case "two":
                execTwo();
                break;
            default:
                console.log("Unknown handler: " + args.data.handler)
                break;
        }
    }

    function execOne() {
        console.log("handler One");
    }

    function execTwo() {
        console.log("handler Two");
    }

    module.exports = {
        data: data,
        proxy: proxy
    };
    </JavaScript>
    <StackPanel Alignment="VerticalCenter" ItemSpacing="4">
        <Each Items="{data}">
            <Panel Width="128" Height="48">
                <Clicked>
                    <Callback Handler="{proxy}" />
                </Clicked>
                <Text Value="{title}" Alignment="Center" TextColor="#fff" />
                <Rectangle Color="{color}" CornerRadius="2" />
            </Panel>
        </Each>
    </StackPanel>
</App>

```

Which one you choose depends on your use case, which you haven’t explained. Hope this helps though.

---

<div class="post-metadata">

**Author:** ![Leonids](https://avatars.discourse-cdn.com/v4/letter/l/a4c791/32.png) [@Leonids](https://forums.fusetools.com/u/Leonids)\
**Post date:** [September 27, 2017, 9:40am UTC](https://forums.fusetools.com/t/pass-name-of-function-from-an-array-to-callback-handler/4639/3 "2017-09-27T09:40:15Z")

</div>

Hello Eren,

If I got you right, you should use something like that:  
For UX:

```auto
<Each Items="{items}">
   <Panel>
      <Clicked>
         <Callback handler="{loadqr}"/>
      </Clicked>
   </Panel>
</Each>

```

For .js:

```auto
function loadqr(arg){
var item = arg.data;
router.push("addItem", item);
// To move somewhere for example
//or add some other logic in loadqr working with "item"
}

```

and then in AddItemPage.js

```auto
var item = this.Parameter;
var title = item.map(function(x) {return x.title});
var imaget = item.map(function(x) {return x.imaget});
var hyper = item.map(function(x) {return x.hyper});
//To do something with them afterwards

```

It is if I got you right, may be you could share some code, to see where are you and get on the same page?  
P.S\> The similar topic has been covered earlier here: [https://www.fusetools.com/community/forums/howto\_discussions/callback\_with\_arguments](https://www.fusetools.com/community/forums/howto_discussions/callback_with_arguments)