Get value of multiple check boxes along with their parent input field

Question

I want some suggestions or a work-around for a situation I have. I'm building an Access Management System where I have to define permissions of Create, Read, Update and Delete for each module. By defining permissions to each module, an admin will create a role which will be assigned to a user later. I have around 14 modules and each module have four permissions as I mentioned earlier. I'm getting each permission's input by a checkbox, so I have several check boxes with a parent field having an id of each module. Here's some code to better understand what I want to achieve and what is my approach to it.

HTML:

<!-- Iteration loop starts here for rendering each module along with it's checkboxes -->
<tr>
    <th scope="row">{{$mod->m_name}}</th>
    <input type="hidden" name="module_id" value="{{$mod->m_id}}">
    <td><input type="checkbox" name="p_read" value="1"></td>
    <td><input type="checkbox" name="p_create" value="1"></td>
    <td><input type="checkbox" name="p_update" value="1"></td>
    <td><input type="checkbox" name="p_delete" value="1"></td>
</tr>
<!-- Loop ends here -->

View:

JavaScript:

var foo = $('#formAddRole').serializeArray();
var json = {"module" : []};

$.each(foo, (key, obj)=>{
    var arr = {
        "module_id" : 0,
        "permissions" : {
            "create" : 0,
            "read" : 0,
            "update" : 0,
            "delete" : 0,
        }
    };

    if(obj.name == "p_read"){
        arr.permissions.read = 1;
        json.module.push(arr);
    }
    // conditions for 'p_create', 'p_update', 'p_delete' goes here...

    if(obj.name == "module_id"){
        arr.module_id = obj.value;
        json.module.push(arr);
    }
});

The JSON structure I want to send to server:

{"modules" : [
    {
        "module_id" : 1,
        "permissions" : {
            "create" : 1, 
            "read" : 1,
            "update" : 1,
            "delete" : 0,
        }
    },
    {
        "module_id" : 2,
        "permissions" : {
            "create" : 0, 
            "read" : 1,
            "update" : 1,
            "delete" : 0,
        }
    },
    // so on...
 ]}

I'm stuck at this point. The logic I'm using is not entirely useful to me. What could be a better approach, How can I achieve this in best way possible? Any help or suggestions would be appreciated. Thanks!

Answer 1

If you are using PHP, just rename your fields as in the code below. No JavaScript is needed...

<tr>
    <th scope="row">{{$mod->m_name}}</th>
    <input type="hidden" name="modules[0][module_id]" value="{{$mod->m_id}}">
    <td><input type="checkbox" name="modules[0][permissions][p_read]" value="1"></td>
    <td><input type="checkbox" name="modules[0][permissions][p_create]" value="1"></td>
    <td><input type="checkbox" name="modules[0][permissions][p_update]" value="1"></td>
    <td><input type="checkbox" name="modules[0][permissions][p_delete]" value="1"></td>
</tr>
<tr>
    <th scope="row">{{$mod->m_name}}</th>
    <input type="hidden" name="modules[1][module_id]" value="{{$mod->m_id}}">
    <td><input type="checkbox" name="modules[1][permissions][p_read]" value="1"></td>
    <td><input type="checkbox" name="modules[1][permissions][p_create]" value="1"></td>
    <td><input type="checkbox" name="modules[1][permissions][p_update]" value="1"></td>
    <td><input type="checkbox" name="modules[1][permissions][p_delete]" value="1"></td>
</tr>

This will result in $_GET array in PHP:

"modules" : [
    [
        "module_id" : 1,
        "permissions" : [
            "create" : 1, 
            "read" : 1,
            "update" : 1,
            "delete" : 0,
        ]
    ],
    [
        "module_id" : 2,
        "permissions" : [
            "create" : 0, 
            "read" : 1,
            "update" : 1,
            "delete" : 0,
        ]
    ]
 ]