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?

ahren · Accepted Answer · 2013-11-18 13:37:11Z

2

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

edited Nov 18, 2013 at 13:37

answered Nov 18, 2013 at 13:09

ahren

17k5 gold badges52 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user3004794 Over a year ago

This script is not returning any data.

ahren Over a year ago

@user3004794 - you're right, I was resetting my variables in each loop. I've updated it now to += instead of =.

user3004794 Over a year ago

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 Over a year ago

Are you sure data[i].images is an array?

user3004794 Over a year ago

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"

|

Collectives™ on Stack Overflow

Json Array within array

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related