title: Populate select element using Vanilla JS and JSON file
body: <p>I'm trying to populate a <code>select</code> element using data from an external <code>json</code> file. </p>
  
  <pre><code>var dropDown = document.getElementById('dropdown');
  
  request.onload = function() {
    if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
      // success
      data = JSON.parse(request.responseText);
      console.log(data);
  
      for (var i = 0, len = data.length; i &lt; len; i++) {
          alert('FOO');
          var data = data[i];
          dropDown.innerHTML(option.name);
      }
  };
  </code></pre>
  
  <p><strong>JSON</strong></p>
  
  <pre><code>{
      "TopLevel": {
          "Second": [
              "data",
              "data",
              "data",
              "data"
          ],
          "Second": [
              {
                  "ThirdLabel": "data",
                  "ThirdID": "data"
              },
              {
                  "ThirdLabel": "data",
                  "ThirdID": "data"
              },
              {
                  "ThirdLabel": "data",
                  "ThirdID": "data"
              }
          ]
      },
      "TopLevel": {
          "Second": [
              "data",
              "data",
              "data",
              "data"
          ],
          "Second": [
              {
                  "ThirdLabel": "data",
                  "ThirdID": "data"
              },
              {
                  "ThirdLabel": "data",
                  "ThirdID": "data"
              },
              {
                  "ThirdLabel": "data",
                  "ThirdID": "data"
              }
          ]
      }
  }
  </code></pre>
  
  <p>I've can successfully return my data using the above but for some reason I cant get the loop to run and im unsure what I'm doing wrong.</p>
  
  <p>There's no console errors and my alert doesn't fire...</p>