如何将表格内的表格转换为 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 = [];
    let x = document.getElementsByName("unitPrice");
    let 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>