Displaying JSON array through ajax (jquery)

Question

I'm pretty new to Ajax and JSON and tried to get this to work but can't seem to get the hang of it.

How do I call the json in ajax and display all the info inside the json file?

here's my json file

{
  posts: [{
    "image": "images/bbtv.jpg",
    "alter": "BioBusiness.TV",
    "desc": "BioBusiness.TV",
    "website": "http://andybudd.com/"
  }, {
    "image": "images/grow.jpg",
    "alter": "Grow Staffing",
    "desc": "Grow Staffing",
    "website": "http://growstaffing.com/"
  }]
}

and the ajax function im using

$.ajax({
  type: "GET",
  url: "category/all.js",
  dataType: "json",
  cache: false,
  contentType: "application/json",
  success: function(data) {

    $.each(data.posts, function(i, post) {
      $('#folio').html('<ul><li><div class="boxgrid captionfull"><img src="' + post.image + '" alt="' + post.alter + '" /><div class="cover boxcaption"><p>' + post.desc + '</p><a href="' + post.website + '" target="_blank">More Work</a></div></div></li></ul>');

    });
    initBinding();
  },
  error: function(xhr, status, error) {
    alert(xhr.status);
  }
});

For some reason, it's only displaying the last item....

Any help in the right direction would be great.

Thanks!

kgiannakakis · Accepted Answer · 2010-02-23 15:06:05Z

5

Try something like this:

$('#folio').html("<ul/>");
$.each(data.posts, function(i,post){
   $('#folio ul').append('<li><div class="boxgrid captionfull"><img src="' + post.image + '" alt="' + post.alter + '" /><div class="cover boxcaption"><p>' + post.desc + '</p><a href="' + post.website + '" target="_blank">More Work</a></div></div></li>');
});

answered Feb 23, 2010 at 15:06

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

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

1 Comment

eek meek Over a year ago

Thanks so much! that worked great. can't believe i spent couple hours trying to solve this. :)

Pharabus · Accepted Answer · 2010-02-23 15:02:30Z

1

you are overwriting the html in #folio each loop, you need to concatinate onto it

try adding the UL first then append to the UL a LI for each loop .append() instead

answered Feb 23, 2010 at 15:02

Pharabus

6,0571 gold badge28 silver badges39 bronze badges

1 Comment

eek meek Over a year ago

Thanks for guiding me to the right direction. it helped me understand exactly what i was doing wrong.

Collectives™ on Stack Overflow

Displaying JSON array through ajax (jquery)

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related