CODEWITHSUNDEEP
angularionic-framework
Shahnaz Raheem
Shahnaz Raheem

Reputation: 228

Ionic show value already check in checkbox

How to show some values which are already check in checkbox?

I have 2 arrays. One array which have all data. And the other array which have some filter data.

For example

Array 1 is [{ userId: "Q9M56QrK2HX1tU4zvnZlPU1Hey73", username: "@yes", }, { userId: "D9M56adsaadaU4zvnZlPU1Hey73", username: "@no" }]

Array 2 is [{pfQ1A3M0S1V6icGcLKTIdBoIWA42}, {D9M56adsaadaU4zvnZlPU1Hey73}]

In check box I am showing array 1. But i need the array 2 value will check in checkbox. Hope i clear this question.

This is my html code

<ion-item>
  <ion-input type="text" [(ngModel)]="groupname" name="groupname" placeholder="Group Name" class="custom-input"></ion-input>
</ion-item>
<div class="spacer" style="height: 5px;"></div>
<ion-item>
  <ion-textarea type="text" row="8" [(ngModel)]="description" name="description" placeholder="Group Description" class="custom-input"></ion-textarea>
</ion-item>

<ion-list>
    <ion-item *ngFor="let usr of allList"  >
      <ion-label>{{usr.username}}</ion-label>
      <ion-checkbox slot="start" (ionChange)="addCheckbox($event,usr.userId)"></ion-checkbox>
    </ion-item>
</ion-list>

As you see i am showing allList in checkbox.

This is my .ts file

  getAllUsers(){
    this.firestore.getUsers().subscribe((data)=>{
      this.allList = data;
      console.log(this.allList);
      this.allList = this.allList.filter(d => d.location === this.user.location);
      console.log(this.allList);
            this.getGroupInfo(this.allList);

    })
  }

getGroupInfo(allList){
  this.messageService.getGroupMessages(this.group_id).subscribe( (data) => {
  console.log(data);
  this.groupname = data.groupname;
  this.description = data.description;
  this.members = data.members;

console.log(this.members);
console.log(this.allList);
  this.userList = this.allList.filter(d => this.members.some(arrEntry => arrEntry === d.userId));
  console.log(this.userList);



  });
}

 addCheckbox(event, checkbox : String) {
   console.log(event);
    if ( event.detail.checked ) {
      this.checked.push(checkbox);
      console.log(this.checked);
    } else {
      let index = this.removeCheckedFromArray(checkbox);
      this.checked.splice(index,1);
    }
  }

  //Removes checkbox from array when you uncheck it
  removeCheckedFromArray(checkbox : String) {
    return this.checked.findIndex((category)=>{
      return category === checkbox;
      console.log(this.checked);
    })
  }

I need this.userList array already check in checkbox. How can i do this any one please ?

Upvotes: 1

Views: 769

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

You can create anew array from your first array with a new property isChecked true/false based on it's presence in the 2nd array

Try like this:

.ts

 array1: any = [
    {
      userId: "Q9M56QrK2HX1tU4zvnZlPU1Hey73",
      username: "@yes"
    },
    {
      userId: "D9M56adsaadaU4zvnZlPU1Hey73",
      username: "@no"
    }
 ];

  array2: any = ["pfQ1A3M0S1V6icGcLKTIdBoIWA42", "D9M56adsaadaU4zvnZlPU1Hey73"];

  checkedArray: any = [];
  constructor() {
    this.checkedArray = this.array1.map(item => ({
      ...item,
      isChecked: this.array2.includes(item.userId)
    }));
  }

.html

<ion-item *ngFor="let item of checkedArray">
    <ion-label>{{item.username}}</ion-label>
    <ion-checkbox slot="start" [checked]="item.isChecked"></ion-checkbox>
</ion-item>

Working Demo

Upvotes: 1

Related Questions