Datatable Editor on NextJS Error

yokowasis

The response

{
  cancelled: [],
  data: [],
  fieldErrors: [],
  error: 'No data detected. Have you used `{extended: true}` for `bodyParser`?'
}

Req.body

[Object: null prototype] {
  'data[row_5][DT_RowId]': 'row_5',
  'data[row_5][first_name]': 'Airi',
  'data[row_5][last_name]': 'Satou',
  'data[row_5][position]': 'Accountant',
  'data[row_5][office]': 'Tokyo',
  'data[row_5][extn]': '5407',
  'data[row_5][age]': '33',
  'data[row_5][salary]': '162700',
  'data[row_5][start_date]': '2008-11-28',
  action: 'remove'
}

staff.ts (copied from example)

import db from '../../db'
import { Editor,Field,Validate,Format,Options } from "datatables.net-editor-server"
import { NextApiRequest, NextApiResponse } from "next";

export default async (req: NextApiRequest, res: NextApiResponse) => {
    let editor = new Editor(db as any, 'datatables_demo').fields(
        new Field('first_name').validator(Validate.notEmpty()),
        new Field('last_name').validator(Validate.notEmpty()),
        new Field('position'),
        new Field('office'),
        new Field('extn'),
        new Field('age')
            .validator(Validate.numeric())
            .setFormatter(Format.ifEmpty(null)),
        new Field('salary')
            .validator(Validate.numeric())
            .setFormatter(Format.ifEmpty(null)),
        new Field('start_date')
            .validator(
                Validate.dateFormat(
                    'YYYY-MM-DD',
                    null,
                    new Validate.Options({
                        message: 'Please enter a date in the format yyyy-mm-dd'
                    })
                )
            )
            .getFormatter(Format.sqlDateToFormat('YYYY-MM-DD'))
            .setFormatter(Format.formatToSqlDate('YYYY-MM-DD'))
    );

    await editor.process(req.body);
    res.json(editor.data());    
}

allan

That all looks fairly sensible so far. Have you done as the error message says and used the extended option for bodyParser? Can you show me that bit of the code?

Thanks,
Allan

yokowasis

@allan
Where should I put it ?

I have tried

...
import { NextApiRequest, NextApiResponse } from "next";

export const config = {
  api: {
    bodyParser: {
      extended:true
    },
  },
}
 
export default async (req: NextApiRequest, res: NextApiResponse) => {
    let editor = new Editor(db as any, 'datatables_demo').fields(
..

still not working

I have tried both with expressJS and nextJS, apparently both of them parsing the body differently. It works fine on expresJS.

req.body on expressJS

{
    "data" : {
        "row_5" : {
            "DT_RowId": "row_5",
            "first_name": "Airi",
            "last_name": "Satou",
            "position": "Accountant",
            "office": "Tokyo",
            "extn": "5407",
            "age": "33",
            "salary": "162700",
            "start_date": "2008-11-28"
        }
    },                                
    "action": "remove"
}

req.body on NextJS

{
  'data[row_5][DT_RowId]': 'row_5',
  'data[row_5][first_name]': 'Airi',
  'data[row_5][last_name]': 'Satou',
  'data[row_5][position]': 'Accountant',
  'data[row_5][office]': 'Tokyo',
  'data[row_5][extn]': '5407',
  'data[row_5][age]': '33',
  'data[row_5][salary]': '162700',
  'data[row_5][start_date]': '2008-11-28',
  action: 'remove'
}

Can you try it on NextJS ?

allan

I haven't used NextJS yet myself and I'm travelling at the moment so I can't experiment just now. However a quick Google suggests that many NextJS projects are built on top of Express - eg https://www.stackchief.com/blog/NextJS%20Examples%20%7C%20Express .

Do you know if you've got express in your stack as well?

Allan

yokowasis

Actually, nextjs includes its own webserver
https://nextjs.org/docs/advanced-features/custom-server

You can use your own server express, but it will strip away some features on the nextjs. And I prefer not doing that.