如何从内部表转换为json

Question

我正在尝试将表单数据转换为json我有一个如下的html表。在表单上提交我想要做的就是将其转换为json

<form class="sales-order-form">
    <table class="table">
        <tbody>
        <tr>
            <th>Item Name</th>
            <th>Unit Price</th>
            <th>Quantity</th>
            <th>Free Quantity</th>
            <th>Sub Total</th>
        </tr>
        <tr>
            <td><select class="form-control" name="itemName" style="width: 250px;">
                <option></option>
                <option>Option1</option>
                <option>Option2</option>
                <option>Option3</option>
            </select></td>
            <td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
            </td>
        </tr>
        <tr>
            <td><select class="form-control" name="itemName" style="width: 250px;">
                <option></option>
                <option>Option1</option>
                <option>Option2</option>
                <option>Option3</option>
            </select></td>
            <td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
            </td>
        </tr>
        </tbody>
    </table>
</form>

在表单上提交，我如何将此表单转换为以下json？

[
  {
    "itemName": "item1",
    "unitPrice": "49"
  },
  {
    "itemName": "item2",
    "unitPrice": "56"
  }
]

如何执行此操作？

我尝试了以下操作

function getFormData($salesOrderForm){
        var unindexed_array = $salesOrderForm.serializeArray();
        var indexed_array = {};

        $.map(unindexed_array, function(n, i){
            indexed_array[n['name']] = n['value'];
        });

        return indexed_array;
    }

但是它只返回一个json

{
  "itemName": "item1",
  "unitPrice": "50"
}

Answer 1

您可以使用document.getElementsByName("unitPrice")和document.getElementsByName("itemName")获得元素详细信息>

尝试一下：

  function getFormData() {
    let res = [];
    var x = document.getElementsByName("unitPrice");
    var y = document.getElementsByName("itemName");

    for (let i = 0; i < x.length; i++) {
      let obj = {
        "itemName": x[i].value,
        "unitPrice": y[i].value
      }
      res.push(obj);
    }
    console.log(res);
  }
  <form class="sales-order-form">
    <table class="table">
      <tbody>
        <tr>
          <th>Item Name</th>
          <th>Unit Price</th>
          <th>Quantity</th>
          <th>Free Quantity</th>
          <th>Sub Total</th>
        </tr>
        <tr>
          <td><select class="form-control" name="itemName" style="width: 250px;">
              <option></option>
              <option>Option1</option>
              <option>Option2</option>
              <option>Option3</option>
            </select></td>
          <td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
          </td>
        </tr>
        <tr>
          <td><select class="form-control" name="itemName" style="width: 250px;">
              <option></option>
              <option>Option1</option>
              <option>Option2</option>
              <option>Option3</option>
            </select></td>
          <td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
          </td>
        </tr>
      </tbody>
    </table>
  </form>
  <button onclick="getFormData()">getFormData</button>