Accessing the JSON data within Ajax success: function() in jQuery

Question

As a disclaimer, I'm a scavenger / hacker of jQuery and not a proficient developer thereof.

I'm attempting to build Twitter-esque pagination, which is almost working.

I'm using PHP & MySQL to retrieve data in JSON format, which is arriving to me as:

[
    {
        "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 ..."
    }

...

]

The code itself is:

<script type="text/javascript">
    function paginate(limit) {
        if (limit == 0) { count = 0; } else if (limit > 0) { count += 10; }
        $(".flash").show();
        $(".flash").fadeIn(400).html("Loading...");
            var data = "limit=" + count;
            $.ajax({
                type: "POST",
                url: "<?php echo config_item('base_url'); ?>topics/jq_get_bookmarks_for_topic_by_tag_as_object/" + <?php echo $results['select_topic'][0]['topic_id']; ?>,
                data: data,
                cache: false,
                success: function **(index, element)** {
                    alert(index);
                    $(".flash").hide();
                    $(".load-link").addClass("link-none");
                    for (var i=0;i<element.length;i++) {
                        $("#data-topics-bookmarks-tags").append('<tr><td>[<a href="<?php echo config_item('base_url'); ?>bookmarks/view/' + **element.bookmark_id** + '">View</a>] [<a href="<?php echo config_item('base_url'); ?>bookmarks/visit/' + element.bookmark_id + '" target="_blank">Link</a>] <a href="<?php echo config_item('base_url'); ?>bookmarks/edit/' + element.bookmark_id + '" title="Edit ' + element.title + '">&lsquo;' + element.title + '&rsquo;</a></td><td>' + element.creation + '</td></tr>');
                    }
                }
            }
        );
    }
    paginate("0");
</script>

And the link that triggers the loading of more data is:

<p><a href="#load" onclick="paginate('10')">Load Bookmarks</a></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".

I've tried every combination I can think of in the two areas I've marked as bold.

When I click the load link, it appends the table as expected, but every item is "undefined".

And yes, the data is coming through as described above; I took the data from an alert(index).

I'm sure this is a simple fix for the proficient among us, but I'm not among them.

davidethell · Accepted Answer · 2013-05-09 08:27:48Z

3

By default the .ajax function will not parse the returning JSON data as an object. You'll have to either call $.parseJSON(index) yourself or else set the dataType to "json" in your .ajax() settings like this:

$.ajax({
    type: "POST",
    dataType: "json",
    ...

Also, the return arguments for your success function are the raw data, the textStatus and a jqXHR object. So for your purposes all you really need is the data which will be automatically parsed as JSON if you include the dataType. So you can change your "success" arguments to:

success: function (element) {

You're not required to handle the textStatus and jqXHR arguments unless you need them.

answered May 9, 2013 at 8:27

davidethell

12.1k6 gold badges47 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Wayne Smallman Over a year ago

Hi David, I have tried using the "dataType", but it didn't work. But that's probably more to do with me not knowing how to access it within the "for" loop. Any ideas?

Wayne Smallman Over a year ago

Also, when I use your code sample above, the script loads every single record and ignores the pagination options entirely. As I said, I'm not proficient with jQuery.

Wayne Smallman Over a year ago

Okay, I added the "dataType" and then changed "element.xxx" to "element[i].xxx" and it's working. David, thanks!

davidethell Over a year ago

Great! Yes, I should have added that your PHP code is returning an array of objects, hence the need for the [i].

Collectives™ on Stack Overflow

Accessing the JSON data within Ajax success: function() in jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related