CODEWITHSUNDEEP
jqueryajaxjsonarrays
eek meek
eek meek

Reputation: 301

Displaying JSON array through ajax (jquery)

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!

Upvotes: 3

Views: 14417

Answers (2)

kgiannakakis
kgiannakakis

Reputation: 104168

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

Upvotes: 5

Pharabus
Pharabus

Reputation: 6062

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

Upvotes: 1

Related Questions