Getting the values of dynamic checkboxes with ngModel

Question

I have database of this structure

  "questionnaire": {
  "id": "5ac5f074867d190bc471dc59",
  "name": "Diabetes Questionnaire Test"
  "item": [
    {
      "prefix": "1",
      "text": "Do you have family history of diabetes?",
      "Questiontype": "choice",
      "options": [
        {
          "value": "Yes",
          "checked": false
        },
        {
          "value": "No",
          "checked": false
        },
        {
          "value": "I Don't know",
          "checked": false
        }
      ]
    },
    {
      "prefix": "2",
      "text": "Are you hypertensive?",
      "Questiontype": "choice",
      "options": [
        {
          "value": "Yes",
          "checked": false
        },
        {
          "value": "No",
          "checked": false
        },
        {
          "value": "I Don't Know",
          "checked": false
        }
      ]
    },

And in my html code I am displaying the options in checkboxes in this way. I am trying to get the values of the options that has been checked in an array or object. Please how can I do this?

    <ion-item *ngFor="let option of item.options;">
    <ion-label>{{option.value}}</ion-label><ion-checkbox [(ngModel)]="option.checked" name="option.checked"></ion-checkbox>
   </ion-item>

Please how can I get the values of the options that have been checked?

Answer 1

By ionChange function in ion-checkbox you can create a new answer array

Html

    <ion-list *ngFor="let item of data.questionnaire.item;let i = index">
        <ion-item *ngFor="let option of item.options;let j =index">
            <ion-label>{{option.value}}</ion-label>
            <ion-checkbox [(ngModel)]="option.checked" (ionChange)="updateAnswer(i,j,option.value,option.checked)"></ion-checkbox>
        </ion-item>
    </ion-list>

  {{answer | json}}

TypeScript

data: any;
  answer:any[] = [];
  constructor(public navCtrl: NavController) {
    this.data = {"questionnaire": {
        "id": "5ac5f074867d190bc471dc59",
        "name": "Diabetes Questionnaire Test",
      "item": [
        {
          "prefix": "1",
          "text": "Do you have family history of diabetes?",
          "Questiontype": "choice",
          "options": [
            {
              "value": "Yes",
              "checked": false
            },
            {
              "value": "No",
              "checked": false
            },
            {
              "value": "I Don't know",
              "checked": false
            }
          ]
        },
        {
          "prefix": "2",
          "text": "Are you hypertensive?",
          "Questiontype": "choice",
          "options": [
            {
              "value": "Yes",
              "checked": false
            },
            {
              "value": "No",
              "checked": false
            },
            {
              "value": "I Don't Know",
              "checked": false
            }
          ]
        }
      ]
    }
    };
  }

  updateAnswer(index,ansindex,value,checked){
    if(!Array.isArray(this.answer[index])){
      this.answer[index] = []
    }
    if(checked){
     this.answer[index][ansindex] =  value
    }else{
      this.answer[index].splice(ansindex,1)
    }
  }

Demo

check the link https://stackblitz.com/edit/ionic-jsxle7?file=pages%2Fhome%2Fhome.ts

Answer 2

    //Sample database structure
      datas = 
    { "questionnaire": { "id": "5ac5f074867d190bc471dc59", "name": "Diabetes Questionnaire Test", "item": [ { "prefix": "1", "text": "Do you have family history of diabetes?", "Questiontype": "choice", "options": [ { "value": "Yes", "checked": true }, { "value": "No", "checked": false }, { "value": "I Don't know", "checked": false } ] }, { "prefix": "2", "text": "Are you hypertensive?", "Questiontype": "choice", "options": [ { "value": "Yes", "checked": false }, { "value": "No", "checked": false }, { "value": "I Don't Know", "checked": false } ] } ] } };


    Set the checked input property to the value like this using your datas
    <div *ngFor="let data of datas.questionnaire.item;">
      <p>
        <input type="checkbox" [checked]="data.options[0].checked">
      </p>
    </div>