Forum | Appery.io

Hi,

can you help me with how to map an array to a mobilecheckboxgroup?

I have a column in a database titled "channels", which has an array of numbers in from 1 to 4.

I also have a mobilecheckboxgroup_10 which has 4 options with values from 1 to 4.

I have a service which returns the values which are present in the "channels" column, but I'm not sure how to map this response to the checkboxgroup on page show, so that only the checkboxes which correspond with the "channels" column are checked?

kind regards

Paul

this is the response I get in my service

{
"id":"**********************************",
"token":"*****************************************************",
"deviceID":"***********************************************",
"timeZone":"UTC",
"type":"I",
"createdAt":"2015-04-25 10:40:05.896",
"_updatedAt":"2015-05-14 08:45:41.975",
"channels":[
"2",
"3",
"4"
]
}

I have tried lots of variations with the mapping without any success

Mobilecheckbox_11 has a value of 1
Mobilecheckbox_12 has a value of 2
Mobilecheckbox_13 has a value of 3
Mobilecheckbox_14 has a value of 4

so in this example how do I map the response above, with channels values of "2", "3" & "4" to the mobilecheckboxgroup, so that checkboxes 12,13 and 14 are checked on page show?

Hello Paul,

Please use this tutorial: https://devcenter.appery.io/documenta...

Hi Sergiy,

as far as I can see this tutorial shows how to populate a checkboxgroup with text labels, but not how to use a service response to check the relevant checkboxes as described above?

If you don't create checkboxes via service mapping - add action run JavaScript on success event of this service, and check checkboxes according to server responce (all responce data available in variable data)

Hi Sergiy

It seems like you're saying that i have an option to create checkboxes via mapping services, that could avoid the need to use Javascript? I would like to understand this option, as the javascript that i have tried has not worked.

1. add JS handler on success event

   1. check all checkboxes according to server response:

      prefor(var i = 0; i < data&#46;channels; i++){
      Apperyio("mobilecheckboxgroupName")&#46;find('[value="'+data&#46;channels+'')&#46;prop('checked', true)&#46;refresh();
      }/pre
      
      here mobilecheckboxgroupName - name of checkboxgroup component

Thanks Sergiy,

that looks like it's working as

for(var i = 0; i < data.channels; i++){
Apperyio("mobilecheckboxgroup_10").find('[value='+data.channels+']').prop('checked', true).refresh();
}

but only when there is one number in the array. If there is more than one number in the array, none of the checkboxes are returned checked.

Hi Paul,

Please add some logs to this code to see in console what happens:

pre

var onDelay = function(){

 for(var i = 0; i < data&#46;channels; i++){ 
     var checkBox = Apperyio("mobilecheckboxgroup_10")&#46;find('[value='+data&#46;channels[i]+']'); 
     console&#46;log("check box[" + i + "] = "); 
     console&#46;log(checkBox); 
     checkBox&#46;prop('checked', true)&#46;refresh(); 
 }  

};

window&#46;setTimeout(onDelay, 100);

/pre

Regards.

Hi Yurii,

the following appears when I have ["2"] in the array

[Log] check box[0] =
[Log] [
​
]
[Log] check box[1] =
[Log] []

when i have ["4"] in the array

[Log] check box[0] =
[Log] [
​
]
[Log] check box[1] =
[Log] []
[Log] check box[2] =
[Log] []
[Log] check box[3] =
[Log] []

they both look and work fine...but when I have more than one number in the array, for example ["2","4"}

nothing appears in the console and none of the checkboxes are checked