CODEWITHSUNDEEP
javascriptangularionic-frameworkionic2ionic3
Sampath
Sampath

Reputation: 65870

Multi select check box with index

I have a multi-select checkbox as shown below. On this method getMultiSelectedItems() which retrieves the selected items as shown below. Let's say I have selected one item.

checked:true,
display: "Co-sleep with parent(s)",
encode : "1",
label :  "uiCoSleepNight"

Can you tell me how to include the index of the item being selected on above object? We can consider index as the order of inputs array.

Note: Actually, I need the index of the selected item.Hope there is a way to modify getMultiSelectedItems() to get that. In other words index of the array which user has selected.

.html

<ion-list>
        <ion-item *ngFor="let i of inputs">
          <ion-label>{{i.display}}</ion-label>
          <ion-checkbox name="{{i.label}}" [(ngModel)]="i.checked"></ion-checkbox>
        </ion-item>
      </ion-list>

.ts

 //get Multi Selected Items
  getMultiSelectedItems(): any {
    return this.inputs.filter(opt => opt.checked);
  }

    this.inputs= [
        {
            "encode": "1",
            "display": "Own bed/crib in own room",
            "label": "uiOwnRoomOwnBedNight",
            "checked": false
        },
        {
            "encode": "1",
            "display": "Own bed/crib but share room with sibling(s)",
            "label": "uiSharedRoomOwnBedNight",
            "checked": false
        },
        {
            "encode": "1",
            "display": "Own bed/crib but share room with parent(s)",
            "label": "uiParentRoomOwnBedNight",
            "checked": false
        },
        {
            "encode": "1",
            "display": "Co-sleep with parent(s)",
            "label": "uiCoSleepNight",
            "checked": false
        },
    ],

Upvotes: 1

Views: 158

Answers (2)

Pengyy
Pengyy

Reputation: 38161

Hope I have get your opinion. you can use Array.map to generate a new array with the result of the Array.filter which contains the original data and its index from the original array.

function getMultiSelectedItems() {
  var arr = [];
  return this.inputs.filter(opt => opt.checked)
                    .map(item => {return {"index": inputs.indexOf(item), "data": item};});
}

var inputs = [{
    "encode": "1",
    "display": "Own bed/crib in own room",
    "label": "uiOwnRoomOwnBedNight",
    "checked": false
  },
  {
    "encode": "1",
    "display": "Own bed/crib but share room with sibling(s)",
    "label": "uiSharedRoomOwnBedNight",
    "checked": true
  },
  {
    "encode": "1",
    "display": "Own bed/crib but share room with parent(s)",
    "label": "uiParentRoomOwnBedNight",
    "checked": false
  },
  {
    "encode": "1",
    "display": "Co-sleep with parent(s)",
    "label": "uiCoSleepNight",
    "checked": true
  },
];

console.log(getMultiSelectedItems());

or simply you can use Array.indexOf with the result of Array.filter, but keep in mind that this won't work if the instance of the object(element of Array.filter) is changed.

function getMultiSelectedItems() {
  return this.inputs.filter(opt => opt.checked);
}

var inputs = [{
    "encode": "1",
    "display": "Own bed/crib in own room",
    "label": "uiOwnRoomOwnBedNight",
    "checked": false
  },
  {
    "encode": "1",
    "display": "Own bed/crib but share room with sibling(s)",
    "label": "uiSharedRoomOwnBedNight",
    "checked": true
  },
  {
    "encode": "1",
    "display": "Own bed/crib but share room with parent(s)",
    "label": "uiParentRoomOwnBedNight",
    "checked": false
  },
  {
    "encode": "1",
    "display": "Co-sleep with parent(s)",
    "label": "uiCoSleepNight",
    "checked": true
  },
];

getMultiSelectedItems().forEach(item => console.log(inputs.indexOf(item)));

Upvotes: 0

misha130
misha130

Reputation: 5706

The second value you can get in filter is index. 

return this.inputs.filter((opt, i) => {
    if(opt.checked) {opt.index = i; return true;}
        });

Upvotes: 1

Related Questions