# Dynamic action sheet buttons - every handler method is the same(the last one)

**URL:** <https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584>\
**Category:** ionic-v3\
**Created:** [August 10, 2017, 4:23pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584 "2017-08-10T16:23:12Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gab0r](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@Gab0r](https://forum.ionicframework.com/u/Gab0r)\
**Post date:** [August 10, 2017, 4:23pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/1 "2017-08-10T16:23:12Z")

</div>

Some time ago i created an ionic3/angular4 app and now i was playing around with the action sheet component.

When i create the buttons directly(as in the code samples described) everthing woks as expected:

```auto
buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          icon: !this.platform.is('ios') ? 'trash' : null,
          handler: () => {
            console.log('Delete clicked');
          }
        },
        {
          text: 'Share',
          icon: !this.platform.is('ios') ? 'share' : null,
          handler: () => {
            console.log('Share clicked');
          }
        },
        {
          text: 'Play',
          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
          handler: () => {
            console.log('Play clicked');
          }
        },
        {
          text: 'Favorite',
          icon: !this.platform.is('ios') ? 'heart-outline' : null,
          handler: () => {
            console.log('Favorite clicked');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]

```

Clicking the buttons shows the correct log message.

But when i create the buttons dynamically like this one:

`buttons: this.createButtons(),`

and the method looks like the following:

```auto
  createButtons() {
    let buttons = [];
    for (var index in this.possibleButtons) {
      let button = {
        text: this.possibleButtons[index].text,
        icon: this.possibleButtons[index].icon,
        handler: () => {
          console.log('setting icon ' + this.possibleButtons[index].icon);
          return true;
        }
      }
      buttons.push(button);
    }
    return buttons;
  }

```

The buttons are still created correctly(text and icon), but when i click one of them. It calls everytime the same handler method.(the last one)  
So the log message is always “setting icon close”

Here’s the full .ts code:

```auto
import { Component } from '@angular/core';

import { Platform, ActionSheetController } from 'ionic-angular';

@Component({
  templateUrl: 'actionsheet.html',
  selector: 'page-actionsheet'
})
export class ActionsheetPage {
headerText: string;
possibleButtons = [{ icon: 'trash', text: 'Trash Collector' }, { icon: 'arrow-dropright-circle', text: 'Networker' }, { icon: 'share', text: 'Player' }, { icon: 'heart-outline', text: 'Harmonizer' }, { icon: 'close', text: 'Canceller' }];

  constructor(
    public platform: Platform,
    public actionsheetCtrl: ActionSheetController
  ) {
    this.headerText = "Action sheet";
  }

  openMenu() {
    let actionSheet = this.actionsheetCtrl.create({
      title: 'Albums',
      cssClass: 'action-sheets-basic-page',
      buttons: this.createButtons()
      // buttons: [
      // {
      // text: 'Delete',
      // role: 'destructive',
      // icon: !this.platform.is('ios') ? 'trash' : null,
      // handler: () => {
      // console.log('Delete clicked');
      // }
      // },
      // {
      // text: 'Share',
      // icon: !this.platform.is('ios') ? 'share' : null,
      // handler: () => {
      // console.log('Share clicked');
      // }
      // },
      // {
      // text: 'Play',
      // icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
      // handler: () => {
      // console.log('Play clicked');
      // }
      // },
      // {
      // text: 'Favorite',
      // icon: !this.platform.is('ios') ? 'heart-outline' : null,
      // handler: () => {
      // console.log('Favorite clicked');
      // }
      // },
      // {
      // text: 'Cancel',
      // role: 'cancel', // will always sort to be on the bottom
      // icon: !this.platform.is('ios') ? 'close' : null,
      // handler: () => {
      // console.log('Cancel clicked');
      // }
      // }
      // ]
    });
    actionSheet.present();
  }

  createButtons() {
    let buttons = [];
    for (var index in this.possibleButtons) {
      let button = {
        text: this.possibleButtons[index].text,
        icon: this.possibleButtons[index].icon,
        handler: () => {
          console.log('setting icon ' + this.possibleButtons[index].icon);
          return true;
        }
      }
      buttons.push(button);
    }
    return buttons;
  }
}

```

Any idea what i’m doing wrong here?  
Thanks in advance!

---

<div class="post-metadata">

**Author:** ![KishuPro](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@KishuPro](https://forum.ionicframework.com/u/KishuPro)\
**Post date:** [August 10, 2017, 4:49pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/2 "2017-08-10T16:49:35Z")

</div>

If possible, provide the full `.ts` code.

---

<div class="post-metadata">

**Author:** ![Gab0r](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@Gab0r](https://forum.ionicframework.com/u/Gab0r)\
**Post date:** [August 10, 2017, 4:55pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/3 "2017-08-10T16:55:18Z")

</div>

added the full code to the topic.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [August 10, 2017, 6:33pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/4 "2017-08-10T18:33:06Z")

</div>

Never use `var`. JavaScript is a very poorly designed language. `let` works like a sane person would expect `var` to, and `var` works like a nutjob on a 72-hour Red Bull bender thought was a good idea. See [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) for more background, especially the “cleaner code in inner functions” bit.

---

<div class="post-metadata">

**Author:** ![KishuPro](https://avatars.discourse-cdn.com/v4/letter/k/b4bc9f/32.png) [@KishuPro](https://forum.ionicframework.com/u/KishuPro)\
**Post date:** [August 11, 2017, 3:24am UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/5 "2017-08-11T03:24:18Z")

</div>

As @rapropos suggested, if you change the `var` to `let` it’ll start working. I do not personally like the `for .. in` here though, a `for .. of` is better suited. Something like this:

```auto
for (let btn of this.possibleButtons) {
  let button = {
    text: btn.text,
    icon: btn.icon,
    ....
  }
  buttons.push(button);
}

```

---

<div class="post-metadata">

**Author:** ![Gab0r](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@Gab0r](https://forum.ionicframework.com/u/Gab0r)\
**Post date:** [August 11, 2017, 12:11pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/6 "2017-08-11T12:11:17Z")

</div>

Thanks for helping and your suggestions!  
Learned a lot from you guys 🙂

---

<div class="post-metadata">

**Author:** ![sana4591](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sana4591](https://forum.ionicframework.com/u/sana4591)\
**Post date:** [March 29, 2018, 8:44am UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/7 "2018-03-29T08:44:27Z")

</div>

thank you very very very much,  
i just replaced “var” with “let” and it is fixed like a charm

---

<div class="post-metadata">

**Author:** ![RaulSagastume](https://avatars.discourse-cdn.com/v4/letter/r/eb8c5e/32.png) [@RaulSagastume](https://forum.ionicframework.com/u/RaulSagastume)\
**Post date:** [June 4, 2018, 2:36pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/8 "2018-06-04T14:36:28Z")

</div>

this solution works for me!! 🙂

Tnks!!

---

<div class="post-metadata">

**Author:** ![liesner](https://avatars.discourse-cdn.com/v4/letter/l/898d66/32.png) [@liesner](https://forum.ionicframework.com/u/liesner)\
**Post date:** [March 29, 2019, 4:28pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/9 "2019-03-29T16:28:29Z")

</div>

My handlers not work,  
Whichever button I click it always takes the last handle ()

---

<div class="post-metadata">

**Author:** ![gsandersmd](https://avatars.discourse-cdn.com/v4/letter/g/b3f665/32.png) [@gsandersmd](https://forum.ionicframework.com/u/gsandersmd)\
**Post date:** [July 6, 2020, 1:14am UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/10 "2020-07-06T01:14:06Z")

</div>

has anyone solved this? getting same issue.

---

<div class="post-metadata">

**Author:** ![petermash](https://avatars.discourse-cdn.com/v4/letter/p/51bf81/32.png) [@petermash](https://forum.ionicframework.com/u/petermash)\
**Post date:** [August 2, 2020, 4:43pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/11 "2020-08-02T16:43:36Z")

</div>

```auto
 async DownloadItems(){ 
    let opts = {
      header: "Select Download Options",
      buttons: this.createDownlodOptionsButtons(),
    };
    const actionSheet = await this.actionSheetCtrl.create(opts);
    await actionSheet.present();
  }

  createDownlodOptionsButtons(){
    let buttons = [];
    let options = [
        { name:"List 1", id:"b"},
        { name:"List 2", id:"a"},
        { name:"List 3, id:"c"},
        { name:"List 4, id:"d"},
    ];

    for (var i = 0; i < options.length; i++) {
      let opt = options[i];
      let button = {
        text: opt.name, 
        handler: async () => {
          
      };
      buttons.push(button);
    }
    return buttons;
  }

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 8:54pm UTC](https://forum.ionicframework.com/t/dynamic-action-sheet-buttons-every-handler-method-is-the-same-the-last-one/101584/12 "2021-07-19T20:54:19Z")

</div>