Generate multiple checkboxes from Javascript array?

Question

My jsfiddle will help explain things better than I ever can >< http://jsfiddle.net/L65QD/17/

I've got two select boxes, when you select something from the first select it enables the second. I have quite a few arrays that I'm using as sort of a fake database.

What I need to happen is that depending on what is selected in profile_select it needs to generate checkboxes for every PRIVILEGE_CODE it has, however the checkboxes must be generated with SEC_PRIVILEGES.Name next to them instead of the actual PRIVILEGE_CODE and they must be generated in the correct DIV. Since it's so hard to explain I made a JSFiddle which just about summarizes it http://jsfiddle.net/L65QD/17/

If my instructions aren't clear:

1. Depending on what profile is selected in the PROFILE_SELECTION
2. Needs to generate some checkboxes based on what PRIVILEGE_PROFILES.PRIVILEGE_CODES it has
3. However the checkboxes must have the name from SEC_PRIVILEGES next to them instead of the code, so PRIVILEGE_CODES = Unique_Code
4. Checkboxes are generated in either the DA div or the MR div based on what Group_Code they have in SEC_PRIVILEGES (this bit really confuses me, can you make it so a DIV ID can be equal to something from an array?) However to generate them in DA or MR it can't really be an IF because my fiddle is just an example and I'd actually have about 30 different codes so I couldn't do 30 IF statements.

This is the method I was experimenting with but it doesn't really make sense and is probably not even close to being on the right lines:

   $(document).on('change', '#select_profile', function () {
    var Select = $("#select_profile option:selected").text();
    $("#apps").html;
    for (var i = 0; i < SEC_Privileges.length; i++) {
        if (SEC_Privileges[i].Unique_Code == //something?) {
            $('#DA').html("<b>lol</b>");

        }

    }
});

Answer 1

So that's pretty simple:

• Correct this fatal error: Array literals are written in square bracket notation ( [] , not () ). When you log the PRIVILEGE_PROFILE[0].PRIVILEGE_CODE you'll see only the first code is logged as the key's value.
• Building the function: Consider what you need:
  • When a user changes company, all checkboxes must be reset
  • When a user changes profile, all checkboxes must be reset, then changed accordingly
  • When 'None' is selected in either dropdown, all checkboxes must be reset

Result: http://jsfiddle.net/kevinvanlierde/L65QD/19/

Some conventions:

• Please choose one naming convention and stick with it. The more common ones are lowercase_underscore or CamelCase . You can opt for uppercase, but don't mix them (easier readability). I've had several errors just because I wrote the names incorrectly.
• Declare your variables at the start of your function, assign them further on.

Also want to add that if I were to have control over the object's structure, I would probably opt for a more hierarchical tree/ JSON-like structure, eg instead of your current object, do:

var SEC_Privileges = {
    'DA': {
       'name': 'Dispatch App',
       'accesses': {
           'DAAccess': 'Access',
           'DASuper': 'Supervisor'
       }
    },
    'MR': {
       'name': 'MyRoster', 
       'accesses': {
           'MRAccess': 'Access',
           'MRSuper': 'Supervisor'
       }
    }
}

Because the object keys are themselves values, you can use them to build your UI, eg to get the full name of your MRAccess you could do something like SEC_Privileges.MR.name + SEC_Privileges.MR.accesses.MRAccess to get MyRoster Access

Answer 2

There is different ways to approach this but the amount of Privileges would always be the same?. Depending on what your SEC_privileges is if its JSON array then you could loop through that array and access the code and the description. You would then want to validate the selected privileges again the whole set and say something like:

var array = ('one','two','three');

if($.inArray(SEC_privileges[i].Unique_code, array))
{
$('#DA').html("<input type='checkbox' id='"+i+"' value='"+SEC_privileges[i].Unique_code+"' checked/>"+SEC_privileges[i].Unique_desc);
}
else
{
 $('#DA').html("<input type='checkbox' id='"+i+"' value='"+SEC_privileges[i].Unique_code+"'/>"+SEC_privileges[i].Unique_desc);
}

A ticked value is done by adding the word checked as part of the html input object. Like illustrated above