Json Array within array

Question

I'm fetching data from a server. The output is in JSON.

$.ajax({
 type: 'POST', 
 data: ({category : inpval}),
 dataType: 'json',
 url: 'php/projects.php',
 success: function(data) {
 for(var i=0; i<data.length; i++){
 $('#project-grid').append('<p>' + data[i].project + '</p><img src="img/'+data[i].images+'">');
 }
 }
});

But data[i].images return an array:

image01.jpg,image01a.jpg,image02.jpg

How I loop this array inside the main array?

Answer 1

Ideally, you don't want to call append() multiple times. It slows things down. It's better practice to create your HTML and append it all in one go.

var toAppend = '', images;
for(var i = 0; i < data.length; i++){
 toAppend += '<li><p>'+ data[i].project +'</p>';
 images = data[i].images.split(',');
 for(var j = 0; j < images.length; j++){
 toAppend += '<img src="img/'+images[j]+'" />';
 }
 toAppend += '</li>';
}
$('#project-grid').append(toAppend);

• user3004794: This script is not returning any data.
• ahren: @user3004794 - you're right, I was resetting my variables in each loop. I've updated it now to += instead of =.
• user3004794: Great. Now I can see the project name. But the script split each word of image name in one image: <img src="img/i">
• ahren: Are you sure data[i].images is an array?
• user3004794: Yes. See console.log(data) extract: alturas: "328,328,370" cliente: "3" descricao: "descrição do projeto 4" id_projeto: "4" images: "image01.jpg,image01a.jpg,image02.jpg" larguras: "451,451,944" project: "Projeto 4" thumb: "thumb02.jpg"