Q:

How can I get an array out of a select optgroups and options?

Say I want an object with this format
    var optgroups = [
    {
      name: "Cat1",
      options: [
        { text: "item1", value: "1" },
        { text: "item4", value: "4" },
      ],
    },
    { name: "Cat2", options: [{ text: "item2", value: "2" }] },
    { name: "Cat3", options: [{ text: "item3", value: "3" }] },
    ];

And I want to create it based on what's already populated in a select element in a form
<select>
   <optgroup label="Cat1">
      <option value="1">item1</option>
      <option value="4">item4</option>
   </optgroup>
   <optgroup label="Cat2">
      <option value="2">item2</option>
   </optgroup>
   <optgroup label="Cat3">
      <option value="3">item3</option>
   </optgroup>
 </select>

What JavaScript code (jQuery is also an option) would achieve such an object?
This is an old code base so things like React/Vue are not an option.

A:

You can use document.querySelectorAll to get all the <optgroup> elements to loop over and use it again to find all the options.

const optgroups = [];
document.querySelectorAll("#mySelect > optgroup").forEach(group=>{
  const obj = {name: group.label, options: []};
  group.querySelectorAll('option').forEach(option=>{
    obj.options.push({text: option.textContent, value: option.value});
  });
  optgroups.push(obj);
});
console.log(optgroups);
<select id="mySelect">
  <optgroup label="Cat1">
    <option value="1">item1</option>
    <option value="4">item4</option>
  </optgroup>
  <optgroup label="Cat2">
    <option value="2">item2</option>
  </optgroup>
  <optgroup label="Cat3">
    <option value="3">item3</option>
  </optgroup>
</select>

