フォームから受け取ったデータの構造 - Express.js

  • 作成日：
  • 最終更新日：2025/06/25

テンプレート

views/content/main.js

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Content Main</title>
</head>
<body>
  <h1>Content Main</h1>

  <form action="/content/result" method="post">
    <p>text1:<input type="text" name="txt"></p>
    <p>text2:<input type="text" name="txt"></p>
    <input type="submit" value="送信">
  </form>
  
</body>
</html>

views/content/result.js

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Content Result</title>
</head>
<body>
  <h1>Content Result</h1>
  <div>
    <pre><code>
      <%= json %>
      
    </code></pre>
    <p><%= data[] %></p>
  </div>
</body>
</html>

routes/content.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next){
  res.render('content/main');
});

router.post('/result', function(req, res, next){
  let data = req.body;
  console.log(data);
  res.render('content/result', { json: JSON.stringify(data), data: data });
});

module.exports = router;

app.js

var contentRouter = require('./routes/content');
app.use('/content', contentRouter);

Case 1

「 views/content/main.js 」がテンプレートの場合、text1 のフォームに 「 text1 」、text2 のフォームに「 text2 」と、入力して送信されたデータ構造は次のようになります。

[Object: null prototype]  { txt: [ 'text1', 'text2' ] }

Case 2

views/content/main.js

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Content Main</title>
</head>
<body>
  <h1>Content Main</h1>

  <form action="/content/result" method="post">
    <p>text1:<input type="text" name="txt[]"></p>
    <p>text2:<input type="text" name="txt[]"></p>
    <input type="submit" value="送信">
  </form>
  
</body>
</html>

「 views/content/main.js 」が上記のような場合は、次のようなデータの構造になります。

[Object: null prototype] { 'txt[]': [ 'text1', 'text2' ] }

Case 3

views/content/main.js

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Content Main</title>
</head>
<body>
  <h1>Content Main</h1>

  <form action="/content/result" method="post">
    <p>text1:<input type="text" name="txt[1][]"><input type="hidden" name="txt[1][]" value="1"></p>
    <p>text2:<input type="text" name="txt[2][]"><input type="hidden" name="txt[2][]" value="2"></p>
    <input type="submit" value="送信">
  </form>
  
</body>
</html>

「 views/content/main.js 」が上記のような場合は、次のようなデータの構造になります。

[Object: null prototype] {
  'txt[1][]': [ 'text1', '1' ],
  'txt[2][]': [ 'text2', '2' ]
}