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

Question

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

此外，我有未知数量的这些键/值：选择/输入组合，下面的示例包含 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}

不确定我是否通过为每个选择/输入组合使用唯一 ID 来错误地执行此操作，或者是否应该将它们命名为相同以便更好地迭代？

谢谢！

Answer 1

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

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

$(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>