How can I seperate data in a single form into JSON array?

Question

view (handlebars)

{{!< 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>

design/add router

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

I'm trying to make a form that can have multiple product(options) and it's suboptions and store each of them in a JSON array of objects separately.

While the view itself is working perfectly, the data are sent as a single JSON object, which is expected since they are in a single form.

I wonder if there's a way to separate the data respectively and be sent as an JSON array, or in some form that could be iterated while not using regex.

//using Express and Handlebars

Could you make an example of how the data should look like. And with JSON you mean objects or an array of objects, right? — Emiel Zuurbier, Oct 11 '20 at 20:48
right now the data are sent in a single JSON object like {cat1 , cat1.1, cat1.2, cat2, cat2.1 ...}. I want them to be sent as [ { cat1.1, cat1.2, cat1.3}, {cat2.1, cat2.2, cat2.3 }, .... ] so I can easily separate each cats — viviet, Oct 11 '20 at 21:58
There seems to be no added logic in how the form is sending data, nor does there have to be. The server probably parses the result as JSON. So you might as well split the data up at the server side in groups. If you don't know how to do that, then add the `app.get('/design/add')` endpoint of your node application to the question. — Emiel Zuurbier, Oct 12 '20 at 09:21

viviet · Accepted Answer · 2020-10-13T15:09:27.253

With help from this post I was able to solve this problem. I thought about deleting this question since it was a duplicate of an answered question in the link, but I decided to leave it for anyone facing similar problem with me.

Just like the solution in the link, I grouped the forms by adding data-item tag in the inputs like so

 <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

and in javascript

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

And the result would be stored in dataArr separately by each category group

How can I seperate data in a single form into JSON array?

1 Answers1