Datatable Editor on NextJS Error

Datatable Editor on NextJS Error

yokowasisyokowasis Posts: 24Questions: 7Answers: 0

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());    
}

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • yokowasisyokowasis Posts: 24Questions: 7Answers: 0
    edited July 2022

    @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 ?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • yokowasisyokowasis Posts: 24Questions: 7Answers: 0

    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.

Sign In or Register to comment.