Appears that I cannot update json object in editor postSubmit event

kcurran

I am trying to use the postSubmit event with Editor v1.9.6 after a create REST call. My test Editor code is below.

propertiesEditor = new $.fn.dataTable.Editor( {
            ajax: {
            create: {
                type: 'POST',
                url:  'property',
                contentType: "application/json; charset=utf-8",
                data: function ( d ) {
                    return JSON.stringify( d['data'][Object.keys(d['data'])[0]] );
                },
                "dataSrc": ""
            },
            edit: {
                type: 'PUT',
                url:  'property/_id_',
                contentType: "application/json; charset=utf-8",
                data: function ( d ) {
                    return JSON.stringify( d['data'][Object.keys(d['data'])[0]] );
                }
            },
            remove: {
                type: 'DELETE',
                url:  'property/_id_'
            }
        },
            table: "#example2",
            "idSrc": "id",
            fields: [ {
                    label: "Name:",
                    name: "name"
                }, {
                    label: "Value:",
                    name: "value"
                }, {
                    label: "Status:",
                    name: "status"
                }
            ],
            formOptions: {
                main: {
                    scope: 'cell' // Allow multi-row editing with cell selection
                }
            }
        } );

propertiesEditor.on('postSubmit', function( e, json, data, action ) {
        console.log("Beginning: " + JSON.stringify(json));
        json = "junk";
        console.log("End: " + JSON.stringify(json));
});

The output from the console is the following.
Beginning: {"data":[{"id":3,"status":1,"name":"test","value":"test"}]}
End: "junk"

In this case the Editor considers the response a success and lets the table update. Wouldn't the update of the json variable cause editor to fail the response since the json variable is no longer in the format required by editor? Maybe I am understanding the documentation incorrectly.

In the future I would like to use the postSubmit event to manipulate the response from existing REST services to match the required Editor response format.

Thanks,
Kyle

allan

Hi Kyle,

The issue here is that json = 'junk' just reassigns the local variable to be the string junk. It doesn't not alter the original object, and Javascript doesn't have a way to pass in an "output parameter" that you can reassign an arbitrary value to.

However, because the value is passed in by reference (not quite a pointer if you are familiar with C, but similar) you can manipulate the original object. So for example you could do json.name = 'kyle'; and that would be in the object that Editor sees.

So the question is, what are you attempting to do here? What is the transform that you what to perform? You can modify the contents of the object, but not replace it entirely.

Allan

kcurran

Allan,

Thanks for setting me straight. I completely ignored the passed by reference component of JavaScript. Sometimes you spend enough time playing with something that you start overlooking the basics.

We have a bunch of REST services that don't support multiple row updates and I would like to put DataTables and Editor in front of them. When you call their create or edit methods they only return a single instance of the created or updated object. I was trying to use postSubmit to manipulate that single json object into the structure required by Editor.

Service Response
{"id":3,"status":1,"name":"test","value":"test"}

Trying to convert to....
{"data":[{"id":3,"status":1,"name":"test","value":"test"}]}

The first attempt I made was the following but of course, because of pointers, it created a circular reference.

propertiesEditor.on('postSubmit', function( e, json, data, action ) {
        json.data = [ json ];
});

Then I kind of sucked myself down the rabbit hole without taking a step back to think about it last night. With your helpful reminder and a fresh set of eyes this is what I came up with that is now working.

propertiesEditor.on('postSubmit', function( e, json, data, action ) {
    // Deep copy json to temp variable
    tempJson = JSON.parse(JSON.stringify(json));

    // Delete all properties under json before resetting data property
    for (var x in json) if (json.hasOwnProperty(x)) delete json[x];

    // Set new data property to create property structure for Editor
    json.data = [ tempJson ];
});

Obviously I still need to come up with a way to convert the errors as well but it should allow us to use the existing services with the caveat that multi line editing will not be supported for those services.

Thanks for your help,
Kyle

colin

Excellent, thanks for the update,

Colin