如何将单个表单中的数据分成 JSON 数组？

Question

视图（车把）

{{!< main}}
<form class="ui form" action="/design/add" method="POST">
  <div class="order_list">
    <h1>Add Product</h1>
    <br>
    {{!-- <input type="file" name="image_main" placeholder="main image"> --}}
    <br>
    <br>
    Category 1
    <br><br>

    <div class="fields">
      <div class="field">
        <label>Category 1</label>
        <select class="ui search dropdown" name="category1_1">
          <option value="A1">category1_1_A1</option>
          <option value="AF">category1_1_A2</option>
        </select>
      </div>
      <div class="field">
        <label>Category 2</label>
        <select class="ui search dropdown" name="category1_2">
          <option value="1">1.category1_2_A1</option>
          <option value="2">2.category1_2_A2</option>
          <option value="3">3.category1_2_A3</option>
          <option value="4">4.category1_2_A4</option>
        </select>
      </div>
      <div class="field" id="category3">
        <label>Category 3</label>
        <select class="ui search dropdown" name="category1_3">
          <option value="1">1.category1_3_A1</option>
          <option value="2">2.category1_3_A2</option>
          <option value="3">3.category1_3_A3</option>
          <option value="4">4.category1_3_A4</option>
        </select>
      </div>
    </div>

    <div class="field">
      <input type="text" placeholder="design_name" name="design_name1">
    </div>

    <select name="skills1" multiple="" class="ui fluid dropdown">
      <option value="1">design_name1_A1</option>
      <option value="2">design_name1_A2</option>
      <option value="3">design_name1_A3</option>
      <option value="4">design_name1_A4</option>
     
    </select>
    <br><br>
  </div>
  <button type="submit">submit</button>
</form>
<br><br>
<button class="ui green large button" onclick="addform()">+</button>

javascript

<script>
  const formsLimit = 5;
  let forms = 1;


  $(document).ready(function () {
    $('.ui.dropdown')
      .dropdown();
  });

  function addform() {
    forms += 1;
    console.log(forms);

    if (forms > formsLimit) {
      forms = formsLimit
      return alert(`${forms} only!`);
    }

// =========== duplicates and appends form's inputs with increased name ==========
const html = `
<br>
Category ${forms}
<br><br>

<div class="fields">
  <div class="field">
    <label>Category 1</label>
    <select class="ui search dropdown" name="category${forms}_1">
      <option value="A1">category1_A1</option>
      <option value="AF">category1_A2</option>
    </select>
  </div>
  <div class="field">
    <label>Category 2</label>
    <select class="ui search dropdown" name="category${forms}_2">
      <option value="1">1.category1_2.A1</option>
      <option value="2">2.category1_2.A2</option>
      <option value="3">3.category1_2.A3</option>
      <option value="4">4.category1_2.A4</option>
    </select>
  </div>
  <div class="field" id="category3">
    <label>Category 3</label>
    <select class="ui search dropdown" name="category${forms}_3">
      <option value="1">1.category1_3.A1</option>
      <option value="2">2.category1_3.A2</option>
      <option value="3">3.category1_3.A3</option>
      <option value="4">4.category1_3.A4</option>
    </select>
  </div>
</div>

<div class="field">
  <input type="text" placeholder="design_name" name="design_name${forms}">
</div>

<select name="skills${forms}" multiple="" class="ui fluid dropdown">
  <option value="1">design_name1_A1</option>
  <option value="2">design_name1_A2</option>
  <option value="3">design_name1_A3</option>
  <option value="4">design_name1_A4</option>

</select>
<br>
`;  

 // ======================== END CONST HTML =======================

    $('.order_list').append(html)
    $('.ui.dropdown').dropdown();
  }
</script>

设计/添加路由器

router.post('/add', (req, res) => {
  // destructuring data
  const {
    category1_1,
    category1_2,
    category1_3,
    design_name1,
    skills1,

    ...
    
    categoryN_1
    categoryN_2
    categoryN_3,
    design_nameN,
    skillsN
  } = req.body;

  // somehow seperate them into JSON array of objects

  // ... other code
});

我正在尝试制作一个可以包含多个产品（选项）及其子选项的表单，并将它们分别存储在 JSON 对象数组中。

虽然视图本身运行良好，但数据作为单个 JSON 对象发送，这是意料之中的，因为它们采用单一形式。

我想知道是否有办法将数据分别分开并作为 JSON 数组发送，或者以某种可以在不使用正则表达式的情况下进行迭代的形式发送。

//使用 Express 和 Handlebars

Answer 1

在this post 的帮助下，我能够解决这个问题。我曾考虑删除此问题，因为它与链接中已回答的问题重复，但我决定将其留给与我遇到类似问题的任何人。

就像链接中的解决方案一样，我通过在输入中添加数据项标记来对表单进行分组，如下所示

 <select data-item="1" class="ui search dropdown" name="category1_1">
 <select data-item="1" class="ui search dropdown" name="category1_2">

...

<select data-item="1" class="ui search dropdown" name="design_name1">      
<select data-item="1" name="skills1" class="ui search dropdown">

...

// the second group should have 2 as a data-item value

在javascript中

 const dataArr = [];
    for (let i = 0; i < forms; i++) {
      let formData = $(`[data-item="${i + 1}"]`).serializeArray();    
      dataArr.push(formData);
    }

结果会按类别组分别存储在dataArr中