Javascript adding object in array from dynamic input form-CodePudding

I am reading input form and getting ids as tle_breakup_0, rtl_breakup_0, tle_breakup_1, rtl_breakup_1, tle_breakup_2, rtl_breakup_2.

$('#myForm').submit(function () {
  var $inputs = $('#myForm :input');
  $inputs.each(function () {
    var attr_name = this.id;
    var attr_value = $(this).val();

  });

});

How can i get the Below is the expected output where i want to collect breakups index id wise .

{
  "breakup": [{

    "tle_breakup_0": "12",
    "rtl_breakup_0": "12"
  },

  {
    "tle_breakup_1": "12",
    "rtl_breakup_1": "12"
  },
  {
    "tle_breakup_2": "12",
    "rtl_breakup_2": ""
  }
  ]
}

CodePudding user response：

This is really just a 'group by' on the last digit of each id. Since you're using jquery you can just use the each to group into an object declared outside of it. Here extracting the last digit using String#match() and then initiliazing objects that don't already exist using logical nullish assignment (??=) and setting the property using bracket notation. Finally the Object.values() of the grouped obect are assigned to the result.breakup.

const result = { breakup: [] };

$('#myForm').submit(function (e) {
  e.preventDefault();
 
  const grouped ={}
  $('#myForm input').each(function () {
    const attr_name = this.id;
    const attr_value = $(this).val();

    const key = attr_name.match(/\d $/)?.[0];
    if (key!==undefined){
      (grouped[key] ??= {})[attr_name] = attr_value;
    }
  });
  
  result.breakup=Object.values(grouped);
  
  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
    <input id="tle_breakup_0" type="text" value="10"/>
    <input id="rtl_breakup_0" type="text" value="10"/>
    <input id="tle_breakup_1" type="text" value="11"/>
    <input id="rtl_breakup_1" type="text" value="11"/>
    <input id="tle_breakup_2" type="text" value="12"/>
    <input id="rtl_breakup_2" type="text" />
    <button>Submit</button>
</form>

Or, if you were looking for more dynamic assignment based on other parts of the id you can simply parse these out and use them as needed.

const result = {};

$('#myForm').submit(function (e) {
  e.preventDefault();

  const grouped = {}
  $('#myForm input').each(function () {
    const attr_name = this.id;
    const attr_value = $(this).val();

    const [, group, key] = attr_name.split('_');
    if (group !== undefined && key !== undefined) {
      grouped[group] ??= {};
      grouped[group][key] ??= {};
      grouped[group][key][attr_name] = attr_value;
    }
  });

  const groupedResult = Object.fromEntries(
    Object.entries(grouped).map(([k, v]) => [k, Object.values(v)]));

  Object.assign(result, groupedResult);

  console.log(result);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm">
    <input id="tle_breakup_0" type="text" value="10"/>
    <input id="rtl_breakup_0" type="text" value="10"/>
    <input id="tle_breakup_1" type="text" value="11"/>
    <input id="rtl_breakup_1" type="text" value="11"/>
    <input id="tle_other_2" type="text" value="12"/>
    <input id="rtl_other_2" type="text" />
    <button>Submit</button>
</form>