title: Uncaught TypeError: Cannot read property 'length' of undefined
body: <p>How do I avoid the following error when trying to take data from an AJAX call and plug it into another function when I click the submit button?</p>
  
  <p>The console.log call in the ajax function shows that the data is grabbed and I'd hoped then stored in json_data.</p>
  
  <p>The aim was then to use this data to alter a string submitted through an HTML form.</p>
  
  <p>The error is then returned at the line in the 'click' function:</p>
  
  <pre><code>console.log(json_data.length);
  </code></pre>
  
  <p>
  
  </p>
  
  <pre><code>&lt;title&gt;Test Form&lt;/title&gt;
  
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
      #results_box {
          border: red 5px solid;
                  }
  
      #place {
          border: #cccccc 1px solid;
  
      }           
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      var json_source = "https://spreadsheets.google.com/feeds/list/0ApL1zT2P00q5dG1wOUMzSlNVV3VRV2pwQ2Fnbmt3M0E/od7/public/basic?alt=json";
      var string_data ="";
      var json_data = $.ajax({
          dataType: 'jsonp',
          url: json_source,
          success: function(data){
              var data_obj = [];
              for (i=0; i&lt;data.feed.entry.length; i++){
                  var el = {'key': data.feed.entry[i].title['$t'], 'value': '&lt;p&gt;&lt;a href="'+data.feed.entry[i].content['$t']+'&gt;'+data.feed.entry[i].title['$t']+'&lt;/a&gt;&lt;/p&gt;'};
                  data_obj.push(el)};
  
              console.log("data grabbed");    
  
              return data_obj;
  
          },      
  
          error: function(jqXHR, textStatus, errorThrown){ 
                          $('#results_box').html('&lt;h2&gt;Something went wrong!&lt;/h2&gt;&lt;p&gt;&lt;b&gt;' + textStatus  + '&lt;/b&gt; ' + errorThrown  + '&lt;/p&gt;');
          }
      }); 
  
      $(':submit').click(function(event, json_data){
          event.preventDefault();
          console.log(json_data.length);
  
          //function
          if ($('#place').val() !=''){
              var copy_string = $('#place').val();
              var converted_string = copy_string;
              for (i=0; i&lt;json_data.length; i++){
                  //console_log(data.feed.entry[i].title['$t']);
                  converted_string = converted_string.replace(json_data.feed.entry[i].title['$t'], 
                      '&lt;a href="'+json_data.feed.entry[i].content['$t']+'&gt;'+json_data.feed.entry[i].title['$t']+'&lt;/a&gt;');
              }  
              $('#results_box').text(converted_string).html();
          }
      });
  
  });//document ready end 
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
      &lt;div id="query_box" class="panel"&gt;  
          &lt;form id="form_submit"&gt;&lt;h4&gt;Copy to process:&lt;/h4&gt;
            &lt;textarea id="place"&gt;&lt;/textarea&gt;
            &lt;input type="submit" value="Go" /&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
     &lt;div id="results_box" &gt;Results will appear here&lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>
   </p>