DataTables AJAX POST data creates difficult structure to query

jbraun14

I have a DataTables Editor setup that I am trying out. I am testing the delete functionality. When it makes the POST via AJAX, I want to take action on the clubId column's value. However, what the POST data shows is what I would consider to be a less than optimal structure for extracting the data from the array. The output of the POST data is this:

{
    "data": {
        "40cf48b9c7c9b978560bcdd4a724c775": {
            "clubId": "40cf48b9c7c9b978560bcdd4a724c775",
            "clubName": "Los Angeles Lakers"
        }
    },
    "action": "remove_team"
}

You can see that it is difficult to query the ClubId because the of it's parent being named after the actual ClubId value. I am not sure what it is doing that instead of something like this:

{
    "data": [
        {
            "clubId": "5f99d422a6a62f97f8fb33722b3dd8ba",
            "clubName": "Fountain Lake Bald Eagles"
        }
}

Ideally, I want to get able to query the value on my PHP script in the form of $clubId = $_POST['data']['clubId'] but that is not possible with the structure that is being generated.

This is how I have the DataTables/Editor configured in case I have something wrong here:

<script type="text/javascript">

jQuery(document).ready(function() {

    var editor;
    editor = new jQuery.fn.dataTable.Editor( {
        ajax: {
            create: {
                type: 'POST',
                url: "<?php echo admin_url( 'admin-ajax.php' ) ?>?action=create_team"
            },
            edit: {
                    type: 'POST',
                    url: "<?php echo admin_url( 'admin-ajax.php' ) ?>?action=edit_team"
                },
            remove: {
                    type: 'POST',
                    url: "<?php echo admin_url( 'admin-ajax.php' ) ?>",
                    data: { action: 'remove_team'}, 
                }
        },
        "serverSide": true,
        table: '#teamTable',
        idSrc:  'clubId',
        fields: [
            // {
            //  "label": "ID:",
            //  "name": "clubId"
            // },
            {
                "label": "Team Name:",
                "name": "clubName"
            }
        ]
    } );

    jQuery('#teamTable').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

    var table = jQuery('#teamTable').DataTable( {
        dom: 'Bfrtip',
        ajax: "<?php echo admin_url( 'admin-ajax.php' ) ?>?action=refresh_teams",
        columns: [
            //{ data: 'clubId' },
            { data: 'clubName' }
        ],
        select: true,
        buttons: [
            //{ extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );

});

</script>

Am I doing something wrong that is generating that extra parent layer in the POST data? Any pointers would be appreciated.

allan

I am not sure what it is doing that instead of something like this:

We use the row id as the object parameter name, to ensure that there can be no conflicts with property names inside the form fields. We fundamentally need the primary key id to be able to edit the row, but let's say you have something other than id as the name, or your use id to mean something other than the primary key id. Putting it as the object key removes any of these issues. It also means you would need to sent clubId in this case since it is redundant information.

In PHP you would use a [foreach loop]((https://www.php.net/manual/en/control-structures.foreach.php) to get the key's value and the information from the object:

foreach ( $_POST['data'] as $id => $values ) {
  // Now $id is 5f99d422a6...
  // And $values['clubName'] is Fountain Lake...
}

Presumably you aren't using our PHP libraries on the server-side here?

Allan

jbraun14

Thanks for that explanation, Allan; that is exactly what I needed. I am building this as part of a private WordPress plugin, so I hadn't looked at your PHP libraries.

Dropping in DataTables for my existing tables was very simple, but adding CRUD functionality during the trial for the Editor seemed far more difficult, at least for my skill level. Thanks!