title: Iterate through deeply nested object to generate html optgroup/options
body: <p>I am trying to get the keys of my object and create an optgroup if it contains children and then make children options of the optgroup. If a child is also a object than i want to nest another optgroup within parent optgroup. Below is my object myTypes</p>
  <pre><code>let myTypes = {
      women: 
      {
          tops:
          {
              poloshirts:&quot;polo shirts&quot;,
              tshirts: &quot;t-shirts&quot;,
              buttondown: &quot;button down&quot;,
              longsleeve:&quot;long sleeve&quot;,
              vneck:&quot;vneck&quot;,
              tanktop:&quot;tanktop&quot;,
              blouse:&quot;blouse&quot;,
              croptop:&quot;croptop&quot;,
              drifit: &quot;dri-fit&quot;,
              dressshirt:&quot;dress shirt&quot;
          },
          bottoms:
          {
              shorts:&quot;shorts&quot;,
              jeans:&quot;jeans&quot;,
              joggers:&quot;joggers&quot;,
              skirts:&quot;skirts&quot;,
              dresspants:&quot;dresspants&quot;,
              leggings:&quot;leggings&quot;
          },
          shoes:
          {
              boots:&quot;boots&quot;,
              sneakers: &quot;sneakers&quot;,
              sandals:&quot;sandals&quot;,
              flats:&quot;flats&quot;,
              heels:&quot;heels&quot;
          },
          jewelry:
          {
              rings: &quot;rings&quot;,
              bracelets:&quot;bracelets&quot;,
              necklaces: &quot;necklaces&quot;,
              anklets: &quot;anklets&quot;
          },
          sweaters: &quot;sweaters&quot;,
          sweatshirts: &quot;sweatshirts&quot;,
          hoodies: &quot;hoodies&quot;,
          dresses:
          {
              sundress: &quot;sundress&quot;,
              short: &quot;short&quot;,
              long: &quot;long&quot;,
              maxidress: &quot;maxidress&quot;
          },
          accessories:
          {
              watches:&quot;watches&quot;,
              glasses:
              {
                  sunglasses: &quot;sunglasses&quot;,
                  reading:&quot;reading&quot;
              },
              wallets: &quot;wallets&quot;,
              keychains: &quot;keychains&quot;,
              lanyards:&quot;lanyards&quot;,
              belts:&quot;belts&quot;,
              purses:&quot;purses&quot;
          }
      },
      
  men: 
      {
          tops:
          {
              poloshirts:&quot;polo shirts&quot;,
              tshirts: &quot;t-shirts&quot;,
              buttondown: &quot;button down&quot;,
              longsleeve:&quot;long sleeve&quot;,
              vneck:&quot;vneck&quot;,
              tanktop:&quot;tanktop&quot;,
              drifit: &quot;dri-fit&quot;,
              dressshirt: &quot;dress shirt&quot;
          },
          bottoms:
          {
              shorts:&quot;shorts&quot;,
              jeans:&quot;jeans&quot;,
              joggers:&quot;joggers&quot;,
              dresspants:&quot;dress pants&quot;,
              leggings:&quot;leggings&quot;
          },
          shoes:
          {
              boots:&quot;boots&quot;,
              sneakers: &quot;sneakers&quot;,
              sandals:&quot;sandals&quot;,
              flats:&quot;flats&quot;
          },
          jewelry:
          {
              rings: &quot;rings&quot;,
              bracelets:&quot;bracelets&quot;,
              necklaces: &quot;necklaces&quot;,
              anklets: &quot;anklets&quot;
          },
          sweaters: &quot;sweaters&quot;,
          sweatshirts: &quot;sweatshirts&quot;,
          hoodies: &quot;hoodies&quot;,
          accessories:
          {
              watches:&quot;watches&quot;,
              glasses:
              {
                  sunglasses: &quot;sunglasses&quot;,
                  reading:&quot;reading&quot;
              },
              wallets: &quot;wallets&quot;,
              keychains: &quot;keychains&quot;,
              lanyards:&quot;lanyards&quot;,
              belts:&quot;belts&quot;
          }
      },
  kids: 
      {
      girl: 
          {
              tops:
              {
                  poloshirts:&quot;polo shirts&quot;,
                  tshirts: &quot;t-shirts&quot;,
                  buttondown: &quot;button down&quot;,
                  longsleeve:&quot;long sleeve&quot;,
                  vneck:&quot;vneck&quot;,
                  tanktop:&quot;tanktop&quot;,
                  blouse:&quot;blouse&quot;,
                  croptop:&quot;croptop&quot;,
                  drifit: &quot;dri-fit&quot;,
                  dressshirt:&quot;dress shirt&quot;
              },
              bottoms:
              {
                  shorts:&quot;shorts&quot;,
                  jeans:&quot;jeans&quot;,
                  joggers:&quot;joggers&quot;,
                  skirts:&quot;skirts&quot;,
                  dresspants:&quot;dresspants&quot;,
                  leggings:&quot;leggings&quot;
              },
              shoes:
              {
                  boots:&quot;boots&quot;,
                  sneakers: &quot;sneakers&quot;,
                  sandals:&quot;sandals&quot;,
                  flats:&quot;flats&quot;,
                  heels:&quot;heels&quot;
              },
              jewelry:
              {
                  rings: &quot;rings&quot;,
                  bracelets:&quot;bracelets&quot;,
                  necklaces: &quot;necklaces&quot;,
                  anklets: &quot;anklets&quot;
              },
              sweaters: &quot;sweaters&quot;,
              sweatshirts: &quot;sweatshirts&quot;,
              hoodies: &quot;hoodies&quot;,
              dresses:
              {
                  sundress: &quot;sundress&quot;,
                  short: &quot;short&quot;,
                  long: &quot;long&quot;,
                  maxidress: &quot;maxidress&quot;
              },
              accessories:
              {
                  watches:&quot;watches&quot;,
                  glasses:
                  {
                      sunglasses: &quot;sunglasses&quot;,
                      reading:&quot;reading&quot;
                  },
                  wallets: &quot;wallets&quot;,
                  keychains: &quot;keychains&quot;,
                  lanyards:&quot;lanyards&quot;,
                  belts:&quot;belts&quot;,
                  purses:&quot;purses&quot;
              }
          },
      boy: 
          {
              tops:
              {
                  poloshirts:&quot;polo shirts&quot;,
                  tshirts: &quot;t-shirts&quot;,
                  buttondown: &quot;button down&quot;,
                  longsleeve:&quot;long sleeve&quot;,
                  vneck:&quot;vneck&quot;,
                  tanktop:&quot;tanktop&quot;,
                  drifit: &quot;dri-fit&quot;,
                  dressshirt: &quot;dress shirt&quot;
              },
              bottoms:
              {
                  shorts:&quot;shorts&quot;,
                  jeans:&quot;jeans&quot;,
                  joggers:&quot;joggers&quot;,
                  dresspants:&quot;dress pants&quot;,
                  leggings:&quot;leggings&quot;
              },
              shoes:
              {
                  boots:&quot;boots&quot;,
                  sneakers: &quot;sneakers&quot;,
                  sandals:&quot;sandals&quot;,
                  flats:&quot;flats&quot;
              },
              jewelry:
              {
                  rings: &quot;rings&quot;,
                  bracelets:&quot;bracelets&quot;,
                  necklaces: &quot;necklaces&quot;,
                  anklets: &quot;anklets&quot;
              },
              sweaters: &quot;sweaters&quot;,
              sweatshirts: &quot;sweatshirts&quot;,
              hoodies: &quot;hoodies&quot;,
              accessories:
              {
                  watches:&quot;watches&quot;,
                  glasses:
                  {
                      sunglasses: &quot;sunglasses&quot;,
                      reading:&quot;reading&quot;
                  },
                  wallets: &quot;wallets&quot;,
                  keychains: &quot;keychains&quot;,
                  lanyards:&quot;lanyards&quot;,
                  belts:&quot;belts&quot;
              }
          }
      }
  }
  </code></pre>
  <p>I tried to iterate through this and then generate html selection with the appropiate options, but I cannot figure it out. The furthest I've gotten is this</p>
  <pre><code>    let selectionHTML = &quot;&quot;;
      let paths = (arr)=&gt;{
          for(let i in arr){
              if(typeof arr[i] == &quot;object&quot; &amp;&amp; arr[i] !== null){
                  selectionHTML += &quot;&lt;optgroup label = '&quot; + i + &quot;'&gt;&lt;/optgroup&gt;&quot;;
                  paths(arr[i]);
              }
          }
      }
      paths(myTypes);
  </code></pre>
  <p>I've no clue how to go about generating my code.</p>