Question

This is my sample JSON response:

[{"id":11137,"name":"Agra"},{"id":11138,"name":"Albizzate"}]

and i need to iterate each array object and print id and name:

        $.ajax({
            url: '{{ path('ajax_provinces') }}',
            type: 'POST',
            dataType: 'json',
            data: {region_id: this.value},
            success: function(provinces) {},
            error: function() { alert("error"); },
            complete: function(provinces) {
                $('select#regions ~ span > img').fadeOut('slow');
                $.each(provinces, function(key, val) {
                    alert(key + ": " + val);
                });
            }
        });

The problem is i’m gettig strange results: function names, function bodies and other internal stuff from jQuery. It seems like it’s iterating through jQuery library functions! Any clue what’s going on?

Answer 1

The problem is that the complete callback doesn’t get passed the returned data as an argument:

complete(jqXHR, textStatus)

A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request (“success”, “notmodified”, “error”, “timeout”, “abort”, or “parsererror”).

(from the docs)

Presumably the weird key/values you’re seeing are the attributes of the jqXHR object.

You need to handle the returned data in success, not complete. My understanding is that complete is generally used for actions that should happen regardless of whether the AJAX request successfully returned data (e.g. hiding a loading animation).