Expressで多次元配列でフォームの入力値を受け取る

Expressでフォームの入力値を配列で受け取るにはexpress.urlencodedの指定が必要。

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

Expressでbody-parserがいらない理由: “bodyparser is deprecated”

どういった形式で指定することが出来るかのサンプルを以下に記載する。

   <input  type="text" name="sample"/>

    <input  type="text" name="apple[0]" value="あ"/>
    <input  type="text" name="apple[1]" value="い"/>
    <input  type="text" name="apple[2]" value="う"/>
    
    <input  type="text" name="lemon[]" value="あ"/>
    <input  type="text" name="lemon[]" value="い"/>
    <input  type="text" name="lemon[]" value="う"/>

    <input  type="text" name="pear" value="あ"/>
    <input  type="text" name="pear" value="い"/>
    <input  type="text" name="pear" value="う"/>

    <input  type="text" name="banana[blue][]" value="あ"/>
    <input  type="text" name="banana[blue][]" value="い"/>
    <input  type="text" name="banana[red][]" value="う"/>
    <input  type="text" name="banana[red][]" value="え"/>

    <input  type="text" name="grape[1][1][1]" value="あ"/>
    <input  type="text" name="grape[1][1][2]" value="い"/>
    <input  type="text" name="grape[1][2][1]" value="う"/>
    <input  type="text" name="grape[1][2][2]" value="え"/>
    <input  type="text" name="grape[2][1][1]" value="お"/>
    <input  type="text" name="grape[2][1][2]" value="か"/>
    <input  type="text" name="grape[2][2][1]" value="き"/>
    <input  type="text" name="grape[2][2][2]" value="く"/>

    <input  type="text" name="Mango[1][1]" value="1"/>
    <input  type="text" name="Mango[1][2]" value="2"/>
    <input  type="text" name="Mango[2][]" value="3"/>
    <input  type="text" name="Mango[2][]" value="4"/>

    <input  type="checkbox" name="Melon[]" value="Cantaloupe" checked  />
    <input  type="checkbox" name="Melon[]" value="Honeydew" checked />
    <input  type="checkbox" name="Melon[]" value="Watermelon"/>

    <input  type="radio" name="Orange[]" value="Clementine"   />
    <input  type="radio" name="Orange[]" value="Mandarine" checked />
    <input  type="radio" name="Orange[]" value="Tangerine"/>

console.log(req.body);で出力すると以下の通りになる。

{
  sample: '',
  apple: [ 'あ', 'い', 'う' ],
  lemon: [ 'あ', 'い', 'う' ],
  pear: [ 'あ', 'い', 'う' ],
  banana: { blue: [ 'あ', 'い' ], red: [ 'う', 'え' ] },
  grape: [ [ [Array], [Array] ], [ [Array], [Array] ] ],
  Mango: [ [ '1', '2' ], [ '3', '4' ] ],
  Melon: [ 'Cantaloupe', 'Honeydew' ],
  Orange: [ 'Mandarine' ]
}

console.logだと深い階層は[Array]表示になるので
console.log(JSON.stringify(req.body.grape,null,''));で出力すると
以下の通りになる。

[[["あ","い"],["う","え"]],[["お","か"],["き","く"]]]