TypeError: Cannot read property 'length' of undefined at Editor._sspSort

mikedmason

Link to test case: http://kiwiplankdc.com:8080/
Debugger code (debug.datatables.net): Added
Error messages shown: TypeError: Cannot read property 'length' of undefined
at Editor._sspSort ...
Description of problem:
Using DataTables & Editor on Vue 2.x front-end, DataTables-Editor-Server w/ Express using Node.js. Simple selecting id, username, password, email.
Initializing results in error on backend

error output

TypeError: Cannot read property 'length' of undefined
    at Editor._sspSort (/home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:1766:42)
    at Editor.<anonymous> (/home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:1659:30)
    at step (/home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:56:23)
    at Object.next (/home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:37:53)
    at /home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:31:71
    at new Promise (<anonymous>)
    at __awaiter (/home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:27:12)
    at Editor._ssp (/home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:1649:16)
    at Editor.<anonymous> (/home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:893:51)
    at step (/home/kdc/kdcIS/node_modules/datatables.net-editor-server/dist/editor.js:56:23)

Home.vue

<template>
    <div class="home">
        <table id="users_table" class="display">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Password</th>
                </tr>
            </thead>
            <tbody>
                <tr>

                </tr>
                <tr>

                </tr>
            </tbody>
        </table>

    </div>
</template>

<script>

export default {
    name: 'Home',
    data() {
        return {
            "request_package":{

            }
        }
    },
    components: {
    },
    mounted() {
        console.log(jQuery.fn)
        jQuery("#users_table").DataTable({
            "dom": "Bfrtip",
            "length": 10,
            "order": [[ 1, "asc" ]],
            "scrollX": true,
            "paging": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url":  this.api_url + "kdc/datatables/users",
                "type": "POST",
            },
            "columns":[
                { "data": "users.id" },
                { "data": "users.username" },
                { "data": "users.password_hashed" },
                { "data": "users.email" }

            ]
            
        })


    },
}
</script>

main.js for vue

...


import dtcss from './assets/DataTables/datatables.css'
require( 'datatables.net' )
require( 'datatables.net-dt' )
require( 'datatables.net-editor' )
require( 'datatables.net-autofill' )
require( 'datatables.net-buttons' )
require( 'datatables.net-buttons/js/buttons.colVis.js' )
require( 'datatables.net-buttons/js/buttons.flash.js' )
require( 'datatables.net-buttons/js/buttons.html5.js' )
require( 'datatables.net-buttons/js/buttons.print.js' )
require( 'datatables.net-colreorder' )
require( 'datatables.net-fixedcolumns' )
require( 'datatables.net-fixedheader' )
require( 'datatables.net-keytable' )
require( 'datatables.net-responsive' )
require( 'datatables.net-rowgroup' )
require( 'datatables.net-rowreorder' )
require( 'datatables.net-scroller' )
require( 'datatables.net-select' )

...

api.js

let e = require('datatables.net-editor-server');
 
let Editor = e.Editor;
let Field = e.Field;
let Validate = e.Validate;
let Format = e.Format;

api.post('/datatables/users/', async function(req, res){
    
    var database_server_config = await kdcFunctions.datatablesdotnet.buildKnexConnection('kdc')
        // returns knex({client: 'mysql', connection:{database: "abc", host: "hostnameabc", user: "username", password: 
        //"password"}})
    
    let editor = new Editor(database_server_config, 'users')
    .fields(
                new Field('users.id'),
                new Field('users.username'),
                new Field('users.password_hashed'),
                new Field('users.email'),
    )
    

    await editor.process(req.body)
    .catch(function(err){
        console.log(err)
    })
    res.json(editor.data());

})

mikedmason

I have noticed that if I change serverside processing to disabled, it works fine. Any ideas how that might relate?

Lapointe

Hi
tbody describe 2 rows... Not sure thisis the problem but is it 'normal' ?

            <tbody>
                <tr>
 
                </tr>
                <tr>
 
                </tr>
            </tbody>

allan

How are you parsing the body parameters for your application? If using body-parser are you using its extended option? e.g.:

app.use( bodyParser.urlencoded({ extended: true }) );

Allan

mikedmason

Allan,
I did not have that package added and used by express. Did it and tested the serverSide, worked like a charm.

Thank you!