looping through JSON array

Question

Hi all. I have recently posted another question which straight away users pointed me in the right direction.

$.ajax({ 
        type: 'POST', url: './', data: 'token=' + token + '&re=8', cache: false, timeout: 5000,
        success: function(html){ 
            auth(html);
            var JSON_array = eval(html);
            alert(JSON_array[0].username); 
        }                           
    });

this returns the data correctly but I want to perform a kind of 'foreach'. the array contains data about multiple incoming and outgoing Instant Messages. So if a user is talking to more than one person at a time i need to loop through. the array's structure is as follows.

    Array
(

    [0] => Array
        (
            [username] => Emmalene
            [contents] => 
                          <ul><li class="name">ACTwebDesigns</li><li class="speech">helllllllo</li></ul>
                          <ul><li class="name">ACTwebDesigns</li><li class="speech">sds</li></ul>
                          <ul><li class="name">ACTwebDesigns</li><li class="speech">Sponge</li><li class="speech">dick</li></ul>
                          <ul><li class="name">ACTwebDesigns</li><li class="speech">arghh</li></ul>
        )

)

any help very much appreciated.

Answer 1

Well since you are using jQuery already you could use the each function:

$.ajax({ 
        type: 'POST', url: './', data: 'token=' + token + '&re=8', cache: false, timeout: 5000,
        success: function(html){ 
            auth(html);
            var JSON_array = eval(html);
            $.each(JSON_array, function(index, data) {
                $('someelement').append(data.contents);
            });
        }                           
    });

Answer 2

Instead of evaluating the HTML, you can even specify JSON as return type...

Iteration is easy when using $.each:

$.ajax({
    type: "POST",
    data: ...,
    url: url,
    dataType: "json",
    success: function(data) {
        $.each(data, function(i, item){
            // do something with every item in data
            // you can reference items in data via
            // data.fieldName
        });
    }
});

But a for ... in loop isn't much harder:

$.ajax({
    ...,
    dataType: "json",
    success: function(data) {
        var fields = data.fieldName;
        var value;
        for (value in fields) {
            // do something with value
        }
    }
});

Answer 3

Just to clarify, As I've read many helpful hints and answers and only this one worked for me:

$.ajax({ 
    type: 'POST', url: './', data: 'token=' + token + '&re=8', cache: false, timeout: 5000, datatype: 'json', 
    success: function(html){ 
        auth(html);
        var JSON_array = eval(html);
        $.each(JSON_array, function(index, data) {
            var talk_to = JSON_array.username;
            var contents_to_update = JSON_array.contents;
        });
    }                           
});

this which made work:

1) use of eval. 2) datatype: 'json' 3) use of jquery's $.each function