Отображение массива JSON через ajax (jquery)

Question

Я довольно новичок в Ajax и JSON и пытался заставить это работать, но не могу понять, как это работает.

Как мне вызвать json в ajax и отобразить всю информацию внутри файла json?

вот мой файл json

{ 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/"}]}

и функция ajax, которую я использую

$.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);
       }
    });

Почему-то отображается только последний элемент ....

Будет полезна любая помощь в правильном направлении.

Спасибо!

Answer 1

Попробуйте что-то вроде этого:

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

Answer 2

вы переписываете html в #folio каждый цикл, вам нужно конкатенировать на него

попробуйте сначала добавить UL, а затем добавить к UL LI для каждого цикла .append () вместо