将未知数量的表单字段对解析为 Javascript 数组

Question

我有一个表单，其中包含 2 个输入、一个下拉列表和一个文本输入。我想附加一个空数组，其中包含每个值，使用下拉列表作为键，使用文本输入作为值。

此外，我有未知数量的这些 key/value : select/input 组合，下面的示例具有 2.

<div id="referenceList">

  <!-- Pair #1 -->
  <label>1) 'Reference value 1'</label>
  <select class="form-control form-list input_importData predictionType" id="input_importData_referenceTypeMap-0">
    <option value="" disabled="">Select a Reference Type</option>
    <option value="Dry Matter">Dry Matter</option>
    <option value="Brix">Brix</option>
    <option value="Total Acid">Total Acid</option>
    <option value="Firmness">Firmness</option>
  </select>
  <input type="number" class="form-control form-list input_importData" id="input_importData_referenceValue-0">

  <!-- Pair #2 -->
  <label>2) 'Reference value 2'</label>
  <select class="form-control form-list input_importData predictionType" id="input_importData_referenceTypeMap-1">
    <option value="" disabled="">Select a Reference Type</option>
    <option value="Dry Matter">Dry Matter</option>
    <option value="Brix">Brix</option>
    <option value="Total Acid">Total Acid</option>
    <option value="Firmness">Firmness</option>
  </select>
  <input type="number" class="form-control form-list input_importData" id="input_importData_referenceValue-1">
</div>

这是我尝试执行此操作的代码示例：

var referenceArray = {};
$('#referenceList select, #referenceList input').each(function(key, value) {
     referenceArray[this.value] = this.value;
});

这里是输出referenceArray的结果：

{{"Reference value 1":13.644132614135742,"Reference value 2":16.426380157470703}: "{"Reference value 1":13.644132614135742,"Reference value 2":16.426380157470703}", Brix: "Brix", 13.644132614135742: "13.644132614135742", Dry Matter: "Dry Matter", 16.426380157470703: "16.426380157470703", …}

显然没有像预期的那样正常运行

{"Brix":13.64434534, "Dry Matter": 15.343483423}

不确定我是否通过为每个 select/input 组合使用唯一 ID 做错了，或者是否应该将它们命名为相同的以便更好地迭代？

谢谢！

Answer 1

试试这个。我向您的 html 添加了一个字段集。然后您需要做的就是循环遍历每个字段集或任何内容并将其添加到您的对象中。我将在稍后的编辑中解释代码。

不知道这是否是一种更优化的方式，但它可能更容易理解和编辑，因为每个值对都将被分开并相应地提取。

$(document).ready(function() {
  var referenceArray = {};

  $('select, input').on('change', function() { /**I use these to capture an event*/
    referenceArray = {}; //Rebuild the object, if you need
    let fld, objKey, objValue;
    $('fieldset').each(function(key, value) {  /*Cycle through every container not every field. then extract the value of the inputs in every container. In this case i am using a fieldset*/
      fld = $(this);
      objKey = fld.find('select').val(); //Get the key of your property 
      objValue = fld.find('input').val(); //Get the actual value
      referenceArray[objKey] = objValue; //Add the key and value as needed
    });

    console.log(referenceArray);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="referenceList">
  <!-- Pair #1 -->
  <fieldset>
    <label>1) 'Reference value 1'</label>
    <select class="form-control form-list input_importData predictionType" id="input_importData_referenceTypeMap-0">
      <option value="" disabled="">Select a Reference Type</option>
      <option value="Dry Matter">Dry Matter</option>
      <option value="Brix">Brix</option>
      <option value="Total Acid">Total Acid</option>
      <option value="Firmness">Firmness</option>
    </select>
    <input type="number" class="form-control form-list input_importData" id="input_importData_referenceValue-0">
  </fieldset>

  <fieldset>
    <!-- Pair #2 -->
    <label>2) 'Reference value 2'</label>
    <select class="form-control form-list input_importData predictionType" id="input_importData_referenceTypeMap-1">
      <option value="" disabled="">Select a Reference Type</option>
      <option value="Dry Matter">Dry Matter</option>
      <option value="Brix">Brix</option>
      <option value="Total Acid">Total Acid</option>
      <option value="Firmness">Firmness</option>
    </select>
    <input type="number" class="form-control form-list input_importData" id="input_importData_referenceValue-1">
  </fieldset>


</div>

将未知数量的表单字段对解析为 Javascript 数组

Parsing unknown number of form field pairs into Javascript array

javascript

arrays

jquery

keyvaluepair