CODEWITHSUNDEEP
javascriptjqueryajaxjson
Sandra Schlichting
Sandra Schlichting

Reputation: 25986

How to decode JSON object and iterate over it?

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?

Upvotes: 4

Views: 2633

Answers (4)

KOGI
KOGI

Reputation: 3989

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] );

Upvotes: 1

Kijewski
Kijewski

Reputation: 26022

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.

Upvotes: 1

no.good.at.coding
no.good.at.coding

Reputation: 20371

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.

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 237817

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).
        });
    }
}

Upvotes: 5

Related Questions