Question

In my js I get a list ‘data’ that looks like that:

data = {test: 'test', test2:'test2', test3 : buffer}

My ‘buffer’ has this form:

buffer =[{testa: 'testa', testb : 'testb'}, {testc: 'testc', testd : 'testd'}, {teste: 'teste', testf : 'testf'} ... ]

What I would like to do is for each element of the buffer, use the data it contains an do an append like this.

$('.try').append('<div> <p> '+testa+' </p> <p> '+testb+' </p> <div>')
$('.try').append('<div> <p> '+testc+' </p> <p> '+testd+' </p>)
...

html:

<div class='try' >

Any idea on how to do that?

I know I can access ‘buffer’ with ‘data.buffer’. But then, I need to create a loop with each element of ‘buffer’ and then for each element of buffer, extract the data in it and create a new div…

Any help would be very welcome.

EDIT:
Here is what I tried:

    for (var i in data.buffer) $('.try').append('<div> <p> '+i.testa' </p> <p> '+i.testb' </p> </div>')

But it doesn’t work.

Answer 1

Use $.each to iterate over your Object..

Try this

var buffer=[{testa: 'testa', testb : 'testb'}, 
            {testc: 'testc', testd : 'testd'}, 
            {teste: 'teste', testf : 'testf'}]​;

var html = '';
$.each(buffer ,function(i, v){ // Iterate over the Array
    html += '<div>' ;
    $.each(v, function(j,value) { // Iterate over each object
        html += '<p> '+ value+' </p>' ;
    });   
    html += '</div>' ;        
});


$('.try').append(html);

Check Fiddle

​
UPDATE

For the second format you are asking .. Remove the innermost $.each

var html = '';
$.each(buffer, function(i, v) { // Iterate over the Array
    html += '<div>';
    var k = 0;
    $.each(v, function(j, value) { // Iterate over each object
        if (k == 0) {
            html += '<p> ' + value + ' </p>';
        }
        else {
            html += '<img src="' + value +'" />';
        }
        k++;
    });
    html += '</div>';
});

$('.try').append(html);​

Fiddle