title: Add options to dropdown in alphabetical order
body: <p>I'm building a function which will receive an array that contains objects.  I need to populate a list with some values from the objects in the array in alphabetical order.</p>
  
  <p>Here's what I've tried so far:</p>
  
  <pre><code>var options = $("#forms-stage");
  
  var formsTest = [
      {
          name: "Here's a Form",
          category: ["cat1"]
      },
      {
          name: "Sample Form",
          category: ["cat2"]
      },
      {
          name: "zzAnother Form",
          category: ["cat1","cat2"]
      },
  ];
  
  function allForms(obj) {
      options.empty();
      $.each(obj, function(index, val){
  
          var add = val.name
  
          if(options.children().length === 0) {
              options.append("&lt;option&gt;" + val.name + "&lt;/option&gt;");
          } else {
              for(i=0; i &lt; obj.length; i++) {
                  if(add &gt; options.children()[i]) {
                      options.append("&lt;option&gt;" + val.name + "&lt;/option&gt;");
                  }
              }
          }
      })
   };
  </code></pre>
  
  <p>When I use this, I get a list containing "Here's a Form" and then three iterations of "zzAnother Form".  I think the issue is since the loop is iterating through each position, appending options causes problems.</p>
  
  <p>I've looked at other solutions <a href="https://stackoverflow.com/questions/2886739/using-jquery-to-dynamically-insert-into-list-alphabetically" title="here">here</a> and <a href="https://www.sitepoint.com/jquery-insert-alphabetically-list/" rel="nofollow noreferrer">here</a>, but neither of them seem to work with the array of objects situation I have here.</p>
  
  <p>Both those solutions use <code>$(this)</code>.  However, simply testing <code>console.log($(this).name)</code> leads to three undefined results, and <code>console.log($(this).name.text())</code> leads to a "Cannot read property of undefined" error.</p>
  
  <p>Example trying <code>$(this)</code> inside the function:</p>
  
  <pre><code> function allForms(obj) {
      options.empty();
      $.each(obj, function(index, val){
  
          var add = val.name
  
          console.log($(this).name);
      })
   };
  </code></pre>