form data in array gets as array in local, but as an object on production

[leocabeza]

Not sure if it's probably related to #3545.
Any pointers or any more info you need, just let me know. Thanks in advance.

On my local environment, I'm getting at request.only(['products'].products:

[{
  "id": 1,
  "name": "Producto 2",
  "checked": false
}, {
  "id": 2,
  "name": "Producto 1",
  "checked": true
}]

While in my local production, I'm getting:

{
  "0": {
    "id": 1,
    "name": "Producto 2",
    "checked": false
  },
  "1":  {
    "id": 2,
    "name": "Producto 1",
    "checked": true
  }
}

// View (raw edge template)

@section('main')
  <form class="box" action="{{ route('OrdersController.store') }}" method="POST">
    {{ csrfField() }}

    <div class="field {{flashMessages.has('errors.products') ? 'errored' : ''}}">
      <label class="label">Productos</label>

      {{-- since product list can be long, we show this above it  --}}
      @if(flashMessages.has('errors.products'))
        <p class="help is-danger">{{flashMessages.get('errors.products')}}</p>
      @end
    </div>

    <div class="field multicheckbox-container pt-4 px-4 {{flashMessages.has('errors.products') ? 'errored' : ''}}">
      @if(flashMessages.has('products'))
        @each((product, index) in flashMessages.get('products'))
          <div class="is-flex is-align-items-center mb-4 multicheckbox-item">
            @if(product.checked === 'true')
              <input
                type="checkbox"
                id="product-{{product.id}}"
                name="products[{{index}}][checked]"
                onchange="handleCheckboxValue(this)"
                value="true"
                checked
              />
            @else
              <input
                type="checkbox"
                id="product-{{product.id}}"
                name="products[{{index}}][checked]"
                onchange="handleCheckboxValue(this)"
                value="false"
              />
            @endif

            <label class="checkbox" for="product-{{product.id}}">
              {{product.name}}
            </label>
            <input id="product-quantity-{{product.id}}" name="products[{{index}}][quantity]" class="input" type="number" min="0" value="{{product.quantity}}">
            <input type="hidden" name="products[{{index}}][id]" value="{{product.id}}">
            <input type="hidden" name="products[{{index}}][name]" value="{{product.name}}">
          </div>
        @endeach
      @else
        @each((product, index) in products)
          <div class="is-flex is-align-items-center mb-4 multicheckbox-item">
            <input
              type="checkbox"
              id="product-{{product.id}}"
              name="products[{{index}}][checked]"
              onchange="handleCheckboxValue(this)"
              value="false"
            />
            <label class="checkbox" for="product-{{product.id}}">
              {{product.name}}
            </label>
            <input id="product-quantity-{{product.id}}" name="products[{{index}}][quantity]" class="input" type="number" min="0" value="0">
            <input type="hidden" name="products[{{index}}][id]" value="{{product.id}}">
            <input type="hidden" name="products[{{index}}][name]" value="{{product.name}}">
          </div>
        @endeach
      @endif
    </div>

    <div class="field is-grouped is-grouped-right">
      <p class="control">
        <a class="button" href={{ route('OrdersController.index') }}>
          <span class="icon-text">
            <span class="icon">
              <ion-icon name="arrow-back-outline"></ion-icon>
            </span>
            <span>Cancelar</span>
          </span>
        </a>
      </p>
      <p class="control">
        <button class="button is-primary" type="submit">
          <span class="icon-text">
            <span class="icon">
              <ion-icon name="save"></ion-icon>
            </span>
            <span>Guardar</span>
          </span>
        </button>
      </p>
    </div>
  </form>
@end

// View (raw html generated):

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nueva órden</title>

    <link rel="stylesheet" href="http://localhost:8080/assets/app.css" />
    <link rel="stylesheet" href="http://localhost:8080/assets/datepicker.css" />
  </head>
  <body>
    <main>
      <form class="box" action="/orders" method="POST">
        <input type='hidden' name='_csrf' value='CFIj3m1b-wJH8s3D6L6UGuPrSeh0ugjaYGfM'>

        <div class="field multicheckbox-container pt-4 px-4 ">
          <div class="is-flex is-align-items-center mb-4 multicheckbox-item">
            <input
              type="checkbox"
              id="product-2"
              name="products[0][checked]"
              onchange="handleCheckboxValue(this)"
              value="true"
            />
            <label class="checkbox" for="product-2">
              Producto 1
            </label>
            <input id="product-quantity-2" name="products[0][quantity]" class="input" type="number" min="0" value="0">
            <input type="hidden" name="products[0][id]" value="2">
            <input type="hidden" name="products[0][name]" value="Producto 1">
          </div>
          <div class="is-flex is-align-items-center mb-4 multicheckbox-item">
            <input
              type="checkbox"
              id="product-1"
              name="products[1][checked]"
              onchange="handleCheckboxValue(this)"
              value="false"
            />
            <label class="checkbox" for="product-1">
              Producto 2
            </label>
            <input id="product-quantity-1" name="products[1][quantity]" class="input" type="number" min="0" value="0">
            <input type="hidden" name="products[1][id]" value="1">
            <input type="hidden" name="products[1][name]" value="Producto 2">
          </div>
        </div>

        <div class="field is-grouped is-grouped-right">
          <p class="control">
            <a class="button" href=/orders>
              <span class="icon-text">
                <span class="icon">
                  <ion-icon name="arrow-back-outline"></ion-icon>
                </span>
                <span>Cancelar</span>
              </span>
            </a>
          </p>
          <p class="control">
            <button class="button is-primary" type="submit">
              <span class="icon-text">
                <span class="icon">
                  <ion-icon name="save"></ion-icon>
                </span>
                <span>Guardar</span>
              </span>
            </button>
          </p>
        </div>
      </form>
    </main>
    <footer class="footer"></footer>
  </body>
</html>

// Controller

export default class OrdersController {

  /* weird bug, in production I get an object */
  /* while in dev, is an array */
  private convertProductsToArray = (products: IobjectProduct | Iproduct): Iproduct[] => {
    if (Array.isArray(products)) {
      return products
    }

    return Object.values(products).reduce((prev: Iproduct[], current: Iproduct) => {
      prev.push(current)

      return prev
    }, [])
  }

  public async store({ request, response, session }: HttpContextContract) {
    /* This is all because I can't add a custom array validator rule */
    let payload = {}
    session.flashExcept(['_csrf'])

    try {
      await request.validate(this.orderValidation)
    } catch (error) {
      payload = error.messages
    }

    const orderBody = request.only([/* some other fields */])
    const productsArray = this.convertProductsToArray(request.only(['products']).products)
    const productsBody = productsArray.filter((product) => product.checked && product.quantity > 0)

    if (!productsBody.length) {
      payload = {
        ...payload,
        products: ['Debe añadir al menos 1 producto'],
      }
    }

    if (Object.values(payload).length > 0) {
      session.flash({
        errors: payload,
      })
      response.redirect().toRoute('orders.create')
      return
    }

    const order = await Order.create(orderBody)

    await Promise.all(
      productsBody.map((product) =>
        order.related('products').attach({ [product.id]: { quantity: product.quantity } })
      )
    )

    session.flash('success', '¡La Órden fue creada con éxito!')
    response.redirect().toRoute('orders.show', { id: order.id })
  }
}

// Model:

import {
  BaseModel,
  column,
  ManyToMany,
  manyToMany,
} from '@ioc:Adonis/Lucid/Orm'

import Product from './Product'

export default class Order extends BaseModel {
  @column({ isPrimary: true })
  public id: number

  @manyToMany(() => Product, {
    pivotColumns: ['quantity'],
    pivotTimestamps: true,
  })
  public products: ManyToMany<typeof Product>
}

// Bodyparser:

```ts
/**
 * Config source: https://git.io/Jfefn
 *
 * Feel free to let us know via PR, if you find something broken in this config
 * file.
 */

import { BodyParserConfig } from '@ioc:Adonis/Core/BodyParser'

const bodyParserConfig: BodyParserConfig = {
  /*
  |--------------------------------------------------------------------------
  | White listed methods
  |--------------------------------------------------------------------------
  |
  | HTTP methods for which body parsing must be performed. It is a good practice
  | to avoid body parsing for `GET` requests.
  |
  */
  whitelistedMethods: ['POST', 'PUT', 'PATCH', 'DELETE'],

  /*
  |--------------------------------------------------------------------------
  | JSON parser settings
  |--------------------------------------------------------------------------
  |
  | The settings for the JSON parser. The types defines the request content
  | types which gets processed by the JSON parser.
  |
  */
  json: {
    encoding: 'utf-8',
    limit: '1mb',
    strict: true,
    types: [
      'application/json',
      'application/json-patch+json',
      'application/vnd.api+json',
      'application/csp-report',
    ],
  },

  /*
  |--------------------------------------------------------------------------
  | Form parser settings
  |--------------------------------------------------------------------------
  |
  | The settings for the `application/x-www-form-urlencoded` parser. The types
  | defines the request content types which gets processed by the form parser.
  |
  */
  form: {
    encoding: 'utf-8',
    limit: '1mb',
    queryString: {},

    /*
    |--------------------------------------------------------------------------
    | Convert empty strings to null
    |--------------------------------------------------------------------------
    |
    | Convert empty form fields to null. HTML forms results in field string
    | value when the field is left blank. This option normalizes all the blank
    | field values to "null"
    |
    */
    convertEmptyStringsToNull: true,

    types: ['application/x-www-form-urlencoded'],
  },

  /*
  |--------------------------------------------------------------------------
  | Raw body parser settings
  |--------------------------------------------------------------------------
  |
  | Raw body just reads the request body stream as a plain text, which you
  | can process by hand. This must be used when request body type is not
  | supported by the body parser.
  |
  */
  raw: {
    encoding: 'utf-8',
    limit: '1mb',
    queryString: {},
    types: ['text/*'],
  },

  /*
  |--------------------------------------------------------------------------
  | Multipart parser settings
  |--------------------------------------------------------------------------
  |
  | The settings for the `multipart/form-data` parser. The types defines the
  | request content types which gets processed by the form parser.
  |
  */
  multipart: {
    /*
    |--------------------------------------------------------------------------
    | Auto process
    |--------------------------------------------------------------------------
    |
    | The auto process option will process uploaded files and writes them to
    | the `tmp` folder. You can turn it off and then manually use the stream
    | to pipe stream to a different destination.
    |
    | It is recommended to keep `autoProcess=true`. Unless you are processing bigger
    | file sizes.
    |
    */
    autoProcess: true,

    /*
    |--------------------------------------------------------------------------
    | Files to be processed manually
    |--------------------------------------------------------------------------
    |
    | You can turn off `autoProcess` for certain routes by defining
    | routes inside the following array.
    |
    | NOTE: Make sure the route pattern starts with a leading slash.
    |
    | Correct
    | ```js
    | /projects/:id/file
    | ```
    |
    | Incorrect
    | ```js
    | projects/:id/file
    | ```
    */
    processManually: [],

    /*
    |--------------------------------------------------------------------------
    | Temporary file name
    |--------------------------------------------------------------------------
    |
    | When auto processing is on. We will use this method to compute the temporary
    | file name. AdonisJs will compute a unique `tmpPath` for you automatically,
    | However, you can also define your own custom method.
    |
    */
    // tmpFileName () {
    // },

    /*
    |--------------------------------------------------------------------------
    | Encoding
    |--------------------------------------------------------------------------
    |
    | Request body encoding
    |
    */
    encoding: 'utf-8',

    /*
    |--------------------------------------------------------------------------
    | Convert empty strings to null
    |--------------------------------------------------------------------------
    |
    | Convert empty form fields to null. HTML forms results in field string
    | value when the field is left blank. This option normalizes all the blank
    | field values to "null"
    |
    */
    convertEmptyStringsToNull: true,

    /*
    |--------------------------------------------------------------------------
    | Max Fields
    |--------------------------------------------------------------------------
    |
    | The maximum number of fields allowed in the request body. The field includes
    | text inputs and files both.
    |
    */
    maxFields: 1000,

    /*
    |--------------------------------------------------------------------------
    | Request body limit
    |--------------------------------------------------------------------------
    |
    | The total limit to the multipart body. This includes all request files
    | and fields data.
    |
    */
    limit: '20mb',

    /*
    |--------------------------------------------------------------------------
    | Types
    |--------------------------------------------------------------------------
    |
    | The types that will be considered and parsed as multipart body.
    |
    */
    types: ['multipart/form-data'],
  },
}

// Kernel:

/*
|--------------------------------------------------------------------------
| Application middleware
|--------------------------------------------------------------------------
|
| This file is used to define middleware for HTTP requests. You can register
| middleware as a `closure` or an IoC container binding. The bindings are
| preferred, since they keep this file clean.
|
*/

import Server from '@ioc:Adonis/Core/Server'

/*
|--------------------------------------------------------------------------
| Global middleware
|--------------------------------------------------------------------------
|
| An array of global middleware, that will be executed in the order they
| are defined for every HTTP requests.
|
*/
Server.middleware.register([
  () => import('@ioc:Adonis/Core/BodyParser'),
  () => import('@ioc:Adonis/Addons/Shield'),
  () => import('App/Middleware/DetectUserLocale'),
])

/*
|--------------------------------------------------------------------------
| Named middleware
|--------------------------------------------------------------------------
|
| Named middleware are defined as key-value pair. The value is the namespace
| or middleware function and key is the alias. Later you can use these
| alias on individual routes. For example:
|
| { auth: () => import('App/Middleware/Auth') }
|
| and then use it as follows
|
| Route.get('dashboard', 'UserController.dashboard').middleware('auth')
|
*/
Server.middleware.registerNamed({})

/* Auth related middleware */
Server.middleware.registerNamed({
  auth: () => import('App/Middleware/Auth'),
})


export default bodyParserConfig

[bhanderivaibhav]

User
data [
{
id: 2,
item_id: 1,
quantity: 50,
rate: 20,
amount: 1000,
uom: 'kg'
},
{
id: 2,
item_id: 1,
quantity: 50,
rate: 20,
amount: 1000,
uom: 'kg'
}
using loadh??