CODEWITHSUNDEEP
angularjstypescriptionic-framework
Jayesh
Jayesh

Reputation: 681

Ionic dynamic radio button group

response = [
    {
        "WellID": "9386",
        "DAYTIME": "2018-07-08",
        "BH_PRESS": "12"
    },
    {
        "WellID": "9386",
        "DAYTIME": "2018-07-08",
        "BH_PRESS": "11"
    },
    {
        "WellID": "1086",
        "DAYTIME": "2018-03-06",
        "BH_PRESS": "33"
    },
    {
        "WellID": "1086",
        "DAYTIME": "2018-03-06",
        "BH_PRESS": "32"
    },
    {
        "WellID": "1186",
        "DAYTIME": "2018-02-01",
        "BH_PRESS": "41"
    },
    {
        "WellID": "1186",
        "DAYTIME": "2018-02-01",
        "BH_PRESS": "42"
    }
]

Above response is from a rest API and I am trying to do like if WellID & DAYTIME are similer those records should be in a radio-group and choose one between them with a radio button. In that case I may have multple groups of radio button depends the response .

but with below implementation it treats as one group. any help would be appreciated 

<ion-list radio-group [(ngModel)]="constraints"  *ngFor="let item of response" >    
  <ion-item>
    <ion-label>{{item.WellName}}</ion-label>
    <ion-radio  [value]="item.BH_PRESS" (ionSelect)="mcAnswer(item)" ></ion-radio>
  </ion-item>

Upvotes: 3

Views: 1893

Answers (2)

Mystery
Mystery

Reputation: 1031

In your .ts, create a new array

modResponse = [];

In the constructor, process the information from your response and pass it on the new array

// for creating group
let groupByWellIdAndDaytime = {};

this.response.forEach((res) => {
  // if group does not exist, create new
  // we use res.WellID+" "+res.DAYTIME because of the given condition on how to group
  if(!groupByWellIdAndDaytime[res.WellID+" "+res.DAYTIME]){
    groupByWellIdAndDaytime[res.WellID+" "+res.DAYTIME] = [];
  }

  // push the item to the empty group or existing group
  groupByWellIdAndDaytime[res.WellID+" "+res.DAYTIME].push(res);
  });

  // push the groups into the created array
  for (let divider in groupByWellIdAndDaytime){
    this.modResponse.push({divider: divider, contents: groupByWellIdAndDaytime[divider]});
  }

  // call to check the value of the radio button 
  mcAnswer(event){
      console.log(event);
  }

In your .html

<ion-list>
    <ion-list radio-group *ngFor="let res of modResponse">
        <ion-item-divider>
            {{ res.divider }}
        </ion-item-divider>
        <ion-item *ngFor="let item of res.contents">
            <ion-label>{{item.WellID}}</ion-label>
            <ion-label>{{item.BH_PRESS}}</ion-label>
            <ion-radio [value]="item.BH_PRESS" (ionSelect)="mcAnswer($event)"></ion-radio>
        </ion-item>
    </ion-list>
</ion-list>

This will result to a list of radio groups and not a single radio group.

Here is the stackblits on how it is working

Upvotes: 2

Paresh Gami
Paresh Gami

Reputation: 4782

You need to process your array like below object then you can make it in a group based on some conditions.

{
    "9386-2018-07-08":[
        {"WellID":"9386","DAYTIME":"2018-07-08","BH_PRESS":"12"},
        {"WellID":"9386","DAYTIME":"2018-07-08","BH_PRESS":"11"}
    ],
    "1086-2018-03-06":[
        {"WellID":"1086","DAYTIME":"2018-03-06","BH_PRESS":"33"},
        {"WellID":"1086","DAYTIME":"2018-03-06","BH_PRESS":"32"}
    ],
    "1186-2018-02-01":[
        {"WellID":"1186","DAYTIME":"2018-02-01","BH_PRESS":"41"},
        {"WellID":"1186","DAYTIME":"2018-02-01","BH_PRESS":"42"}
    ]
}

I write a function that.

processJsonForRadioGroup() {
        let newRespone = [];
        let newFinalResponse = {};
        for(let i=0;i<this.response.length;i++) {
            let singleObj = this.response[i]['WellID']+"-"+this.response[i]['DAYTIME'];
            if(newRespone.indexOf(singleObj)==-1) {
                newRespone.push(singleObj);
                newFinalResponse[singleObj] = [];
                newFinalResponse[singleObj].push(this.response[i]); 
            } else {
                newFinalResponse[singleObj].push(this.response[i]);
            }
        }
        this.newFinalResponse = newFinalResponse;

        console.log(JSON.stringify(this.newFinalResponse));
    }

Now the issue is ngFor is not working with an object so we created one pipe for that.

You can find a working example here because explaining this in text much hard so please refer example. Hope you will understand.

https://stackblitz.com/edit/ionic-ndnevk

Upvotes: 0

Related Questions