Parsing unknown number of form field pairs into Javascript array

Question

I have a form featuring 2 inputs, a dropdown and a text-input. I would like to append an empty array with the values of each, using the dropdown as the Key and the text-input as the value.

Furthermore, I have an unknown number of these key/value : select/input combinations, the example below featuring 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>

Here is an example of my code attempting to do this:

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

And here is the result of outputting 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", …}

Clearly not functioning properly as the expected result would be

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

Not sure if I'm doing this incorrectly by using unique id's for each select/input combination or if they should be titled the same for better iteration?

Thanks!

Answer 1

Try this out. I added a fieldset to your html. And then all you need to do is cycle through every fieldset o whatever and add that to your object. I´ll explain the code in a later edit.

IDK whether this is a more optimal way but it might be easier to comprehend and edit, since every value pair will be separated and extracted accordingly.

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