title: TypeError: Cannot read property 'length' of undefined - but don't even use 'length'!
body: <p>I have read all over the web about this kind of error, and established it's not from having multiple jQuery core sources. I am using jQuery-1.10.2.min.js.</p>
  
  <p>The page I am working on allows the user to select an Event from a list, after which the list of Activities belonging to that Event should be displayed on the page.</p>
  
  <p>The jQuery/Ajax code reads:</p>
  
  <pre><code>$("#event").change(function ()
  {
      //get the selected value
      var eventId = $(this).val();
      alert( "sel val is " +  eventId);//this works
  
      $.ajax({
          dataType: 'json',
          type: 'GET',
          url: 'stcg-json-responses.php?fct=getJSONAllActivitiesAtEvent',
          data: "eventId="+eventId,
          cache: false,
          success: function(data)
          {
                  alert("Data sent! " + eventId);//this works
  
                  $.isArray(data.response)
                  {
                      alert("this is an array");//this works
                      $.each(data.response, function (index, value)
                      {
                          // Loop through your results in jQuery and modify your HTML elements
                          htmlElement.append("&lt;option id='key'&gt;" + value + "&lt;/option&gt;");
                      });
                  }
          },
          error: function(xhr, status, error)
          {
              alert("Data not sent!");
              //console.log("Data not sent!");
          }
      });
  </code></pre>
  
  <p>Looking at the results with various browser dev tools, the Response is always fine - it is in the form of an anonymous array of JSON objects, each one comma-separated from the other. But the script above crashes on:
      $.each(data.response, function (index, value)</p>
  
  <p>with the Uncaught TypeError.</p>
  
  <p>To give you a better idea, the Response data is formatted as (for example):</p>
  
  <pre><code>[
  {"activity_id":44,"activity_name":"Unknown activity","activity_desc":"Unknown activity","activity_short_code":"U","event_id":4,"capacity":0,"day_of_week":6,"date":"2012-03-24","project_leader":"","open":0},
  {"activity_id":87,"activity_name":"Cleanup at Zoo Bellevue","activity_desc":"Zoo et parc d'accueil Bellevue","activity_short_code":"","event_id":4,"capacity":5,"day_of_week":6,"date":"2012-03-24","project_leader":"","open":0},
  {"activity_id":89,"activity_name":"Ali Baba cleanup","activity_desc":"Ali Baba cleanup","activity_short_code":"","event_id":4,"capacity":10,"day_of_week":6,"date":"2012-03-24","project_leader":"","open":0}
  ]
  </code></pre>
  
  <p>Anyone have some idea what is going on here?
  Thanks so much,
  swissphp</p>
  
  <p>P.S. Have tried with a plain Javascript for loop, but it crashes on array.length.</p>
  
  <p>====================================================================================
  SOLUTION - BASED ON HELP RECEIVED HERE, this is my new code, which works:</p>
  
  <pre><code>$("#event").change(function ()
  {
      //get the selected value
      var eventId = $(this).val();
  
      var selectElement = $("#activity");
  
      $.ajax({
          dataType: 'json',
          type: 'GET',
          url: 'stcg-json-responses.php?fct=getJSONAllActivitiesAtEvent',
          data: "eventId="+eventId,
          cache: false,
          success: function(data)
          {
              if ($.isArray(data))
              {
                  $.each(data, function (index, value)
                  {
                      // Loop through your results in jQuery and modify your HTML elements
                      selectElement.append($('&lt;option&gt;&lt;/option&gt;').val(index).html(value['activity_name']));
                  });
              }
          },
          error: function(xhr, status, error)
          { //etc etc etc
  </code></pre>
  
  <p>Many thanks to all who contributed!</p>