2

我正在尝试将表单数据转换为 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"
}
4

3 回答 3

5

您可以使用document.getElementsByName("unitPrice")and获取元素详细信息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>

于 2019-12-11T05:52:58.730 回答
1

您可以尝试使用 jQuery.map()和.get()

$('form').submit(function(){
  var json = $('.table tr:gt(0)').map(function(){
    return {
      itemName: $(this).find('select option:selected').text(), 
      unitPrice: $(this).find('[name=unitPrice]').val()
    }
  }).get();
  console.log(json);
  return false; // added to stay on the page for testing purpose
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
    <input type="submit" id="Submit" value="Submit"/>
</form>

于 2019-12-11T06:11:06.430 回答
0

我会依靠Array.reduce：

function getFormData($salesOrderForm) {
  const serializedArray = $salesOrderForm.serializeArray();

  var result = serializedArray.reduce((accumulator, value, index) => {
    const isNewObj = index % 2 === 0;
    const obj = isNewObj ? {} : accumulator[accumulator.length - 1];

    if (isNewObj) {
      accumulator.push(obj);
    }

    obj[value.name] = value.value;

    return accumulator;
  }, []);

  console.log(result);

  return result;    
}
于 2019-12-11T06:36:54.087 回答