title: Trying to loop through JSON data in my javascript (ASP.Net)
body: <p>I have a javascript function called <code>getRoute</code> which is supposed to take a list of <code>route</code> objects from my MVC controller and insert them into a dropdown menu in my view. </p>
  
  <p>Here is the function:</p>
  
  <pre><code>function getRoute(selectedPart) {
      var $form = $('#form-create'),
          $routeDropdown = $('#dd-route'),
          structure = _.template($('#tmpl-route-list').html());
  
      if (selectedPart) {
          $form.block();
          $.get('@Url.Action("getRouteFromPart", "wip")', {
              partId: selectedPart
          }).done(function (response) {
              $form.unblock();
  
              var html = structure({ routes: response });
              $routeDropdown.html(html);
          });
      } else {
          $routeDropdown.html(structure({ routes: null }));
      }
  }
  </code></pre>
  
  <p><strong>Explanation</strong></p>
  
  <p><code>selectedPart</code> is a value from a different dropdown (not shown here). Based on what is chosen there, <code>getRoute</code> will hit the <code>"wip"</code> controller and use its "<code>getRouteFromPart"</code> action to bring back a list of route objects called <code>routes</code>. Then it is supposed to put that list into the dropdown menu via an underscore.js template called <code>#tmpl-route-list</code>.</p>
  
  <p>Here's that template code:</p>
  
  <pre><code>&lt;% if (routes) { %&gt;
      &lt;% foreach(var route in routes.routes) { %&gt;
          &lt;option value="&lt;%= route.routesId %&gt;"&gt;
              &lt;% route.routesName %&gt;
          &lt;/option&gt;
      &lt;% } % &gt;
  &lt;% } %&gt;
  </code></pre>
  
  <p><strong>Explanation</strong></p>
  
  <p><code>routes.routes</code> refers to the <em>routes</em> list inside the <em>routes</em> response object. I'm trying to loop through that list and put the <code>routeId</code> and <code>routeName</code> of each <code>route</code> object into its own <code>&lt;option&gt;</code> tag for the dropdown.</p>
  
  <p>Needless to say, it doesn't work. In the javascript console it gives me the error "Unexpected token var". If I remove 'var' from the foreach, it says "Unexpected token {". </p>
  
  <p>Note: I have almost the exact same setup in another part of the website and it works perfectly. The only difference is <em>there</em> it gets just a single object to put in the dropdown and <em>here</em> I'm trying to do it with a list of objects. Clearly there is something wrong with my looping or something, but I don't know how to fix it.</p>
  
  <p>Can someone help?</p>