How to decode JSON object and iterate over it?

Question

In this post I learned how to encode an object on the server side, and now I would like to decode it on the client side.

On the client side I do

$.ajax({
    type: "GET",
    url: "/cgi-bin/ajax_sort.pl",
    contentType: "application/json; charset=utf-8",
    dataType: "json",

    data: { "column" : this.id },

    error: function(XMLHttpRequest, textStatus, errorThrown) {
        showError('responseText: ' + XMLHttpRequest.responseText);
        showError('textStatus: ' + textStatus);
        showError('errorThrown: ' + errorThrown);
    },

    success: function(result){
        if (result.error) {
            showError(result.error);
        } else {

        var obj = jQuery.parseJSON(result);

        }
    }
});

Question

Does obj now contain the decoded JSON data?

If so, the object looks like this one the server side (output from Perl's Data::Dumper )

$VAR1 = {
          '127' => {
                     'owners' => [
                                   'm'
                                 ],
                     'users' => [
                                  'hh',
                                  'do'
                                ],
                     'date_end' => '24/05-2011',
                     'title' => 'dfg',
                     'date_begin' => '24/05-2011',
                     'members_groups' => [],
                     'type' => 'individuel'
                   },
          '276' => {
                     ...

Question

Is obj indeed contains the decoded JSON, how do I iterate over the object?

Answer 1

Because you specified the dataType: 'json' , result should already contain the Javascript object unserialized from the HTTP response. $.parseJSON should be unnecessary.

You can loop through it with $.each :

success: function(result){
    if (result.error) {
        showError(result.error);
    } else {
        $.each(result, function(key, value) {
            alert(value.title).
        });
    }
}

Answer 2

result is already a JSON object - parsed by jQuery since you've specified dataType: "json" - so you shouldn't be parsing it.

To go over the data, you could do this:

for(key in result){
    var curr = result[key];

    //iterate over owners    
     for(var i = 0; i < curr.owners.length; i++){
         alert(curr.owners[i]);
     }

    //iterate over users    
     for(var i = 0; i < curr.users.length; i++){
         alert(curr.users[i]);
     }

     alert(curr.data_end);
     alert(curr.title);

    //and so on...
}

Update

I keep forgetting about $.each() as shown in lonsomeday's answer - you might want to go with that instead.

Answer 3

You have to declare the data type of your AJAX request as JSON. jQuery will automatically "decode" this and create an object out of it.

You can immediately access the data via alert( result[127] );

Answer 4

You can iterate over obj's members using for...in .

for(var key in obj) {
    var value = obj[key];
    alert(key + "=" + value);
}

Note: There should be little reason for you to want to iterate over the members of a JSON object. JSON is intended as a serialization format where both sides (client and server) know its structure. If you can help what data is transmitted, obj should be an array on its outmost scope.