Populate drop down from XML - code executing in wrong order
<p>I am trying to populate a drop down box from an XML file using jQuery. When the code is ran it appears to execute in order.</p>

<p>jQuery:</p>

<pre><code>  $("#filterButton").click(function() {
    var dropdown = new Array();
    $.get('../restaurants.xml', function (xmlFile) {
      $(xmlFile).find('restaurant').each(function () {
        var found = false;
        var $restaurant  = $(this);
        var type = $restaurant.attr("type");

        dropdown.forEach(function(arrayValue){
          if(arrayValue == type){
            found = true;
          }
        });
        if(found == false){
          dropdown.push(type);
        }
      });
    });
    $('#potentialRestaruants').append('&lt;select&gt;');
      dropdown.forEach(function(arrayValue){
        $('#potentialRestaruants').append('&lt;option value="' + arrayValue + '"&gt;' + arrayValue + '&lt;/option&gt;' );
      });
      $('#potentialRestaruants').append('&lt;/select&gt;'); 
  });
</code></pre>

<p>However the code is being run in this order:</p>

<pre><code>  $("#filterButton").click(function() {
    var dropdown = new Array();
</code></pre>

<p>then</p>

<pre><code>$('#potentialRestaruants').append('&lt;select&gt;');
      dropdown.forEach(function(arrayValue){
        $('#potentialRestaruants').append('&lt;option value="' + arrayValue + '"&gt;' + arrayValue + '&lt;/option&gt;' );
      });
      $('#potentialRestaruants').append('&lt;/select&gt;'); 
  });
</code></pre>

<p>then </p>

<pre><code>$.get('../restaurants.xml', function (xmlFile) {
  $(xmlFile).find('restaurant').each(function () {
    var found = false;
    var $restaurant  = $(this);
    var type = $restaurant.attr("type");

    dropdown.forEach(function(arrayValue){
      if(arrayValue == type){
        found = true;
      }
    });
    if(found == false){
      dropdown.push(type);
    }
  });
});
</code></pre>

<p>Why is the code being ran in this order and how can I get to run in the order I need?</p>
