Javascript adding object in array from dynamic input form

Question

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": ""
  }
  ]
}

Answer 1

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>