title: Why can't I use the result of $.getJSON() immediately?
body: <p>I am trying to get my $.getJSON to work but it returns nothing. Here is my jQuery:</p>
  
  <pre><code>$('#courseSelect').bind('change', function()
  {
      data = $.getJSON('lessons.js');
      var html ='&lt;select name="lessonSelect id="lessonSelect"&gt;';
      var len = data.length;
      alert(data.length); //this alerts "undefined"
      for (var i = 0; i&lt; len; i++) {
          html += '&lt;option value="' + data[i].value + '"&gt;' + data[i].name + '&lt;/option&gt;';
      }
      html +='&lt;/select&gt;';
      alert(html); //this alerts &lt;select...&gt;&lt;/select&gt; 
      //but no option tags because there's nothing to loop through
      $('lessonsDiv').html(html);
  });
  </code></pre>
  
  <p>This is my lessons.js file</p>
  
  <pre><code>   {"lessons": 
       [
            {"value": "1", "name": "Lesson 1"},
            {"value": "2", "name": "Lesson 2"},
            {"value": "3", "name": "Three"}
       ]
      }
  </code></pre>
  
  <p>Ultimately, what I'm trying to do is create a new select list of lessons when a course first is selected. But for now, I'm just trying to get this getJSON method to work but it's not. Be great if anyone can see what's wrong with. Is it expecting a different sort of data?</p>