title: Accessing the JSON data within Ajax success: function() in jQuery
body: <p>As a disclaimer, I'm a scavenger / hacker of jQuery and not a proficient developer thereof.</p>
  
  <p>I'm attempting to build Twitter-esque pagination, which is almost working.</p>
  
  <p>I'm using PHP &amp; MySQL to retrieve data in JSON format, which is arriving to me as:</p>
  
  <pre><code>[
      {
          "bookmark_id":"5507",
          "creation":"Mon 16th Jul 2012",
          "url":"http:\/\/www.bbc.co.uk\/news\/science-environment-18833386",
          "title":"Light trick to see around corners ..."
      }
  
  ...
  
  ]
  </code></pre>
  
  <p>The code itself is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function paginate(limit) {
          if (limit == 0) { count = 0; } else if (limit &gt; 0) { count += 10; }
          $(".flash").show();
          $(".flash").fadeIn(400).html("Loading...");
              var data = "limit=" + count;
              $.ajax({
                  type: "POST",
                  url: "&lt;?php echo config_item('base_url'); ?&gt;topics/jq_get_bookmarks_for_topic_by_tag_as_object/" + &lt;?php echo $results['select_topic'][0]['topic_id']; ?&gt;,
                  data: data,
                  cache: false,
                  success: function **(index, element)** {
                      alert(index);
                      $(".flash").hide();
                      $(".load-link").addClass("link-none");
                      for (var i=0;i&lt;element.length;i++) {
                          $("#data-topics-bookmarks-tags").append('&lt;tr&gt;&lt;td&gt;[&lt;a href="&lt;?php echo config_item('base_url'); ?&gt;bookmarks/view/' + **element.bookmark_id** + '"&gt;View&lt;/a&gt;] [&lt;a href="&lt;?php echo config_item('base_url'); ?&gt;bookmarks/visit/' + element.bookmark_id + '" target="_blank"&gt;Link&lt;/a&gt;] &lt;a href="&lt;?php echo config_item('base_url'); ?&gt;bookmarks/edit/' + element.bookmark_id + '" title="Edit ' + element.title + '"&gt;&amp;lsquo;' + element.title + '&amp;rsquo;&lt;/a&gt;&lt;/td&gt;&lt;td&gt;' + element.creation + '&lt;/td&gt;&lt;/tr&gt;');
                      }
                  }
              }
          );
      }
      paginate("0");
  &lt;/script&gt; 
  </code></pre>
  
  <p>And the link that triggers the loading of more data is:</p>
  
  <pre><code>&lt;p&gt;&lt;a href="#load" onclick="paginate('10')"&gt;Load Bookmarks&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Everything is working .. with the obvious exception of me actually being able to access the data and have it display as anything other than "undefined".</p>
  
  <p>I've tried every combination I can think of in the two areas I've marked as bold.</p>
  
  <p>When I click the load link, it appends the table as expected, but every item is "undefined".</p>
  
  <p>And yes, the data is coming through as described above; I took the data from an alert(index).</p>
  
  <p>I'm sure this is a simple fix for the proficient among us, but I'm not among them.</p>