CODEWITHSUNDEEP
jqueryajaxjson
user3004794
user3004794

Reputation: 13

Json Array within array

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?

Upvotes: 0

Views: 59

Answers (1)

ahren
ahren

Reputation: 16961

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

Upvotes: 2

Related Questions