使用jQuery在JSON请求结果上创建新的列表项

Question

当有人单击我的小部件框上的页码时，我发出一个返回JSON结果的请求。

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: "GET",
                url: "@Url.Action("FetchMiniNoticiasFromPage", "Noticias")",
                data: "page=" + $(this).text(),
                dataType: "json",
                success: function (data) {
                    alert("fetched!"); 
                    //This is returning exactly what I want.

                    /*Object { ImagenChicaUrl="http://www.dss.com.bo/img/iniciopro/can01.JPG", Descripcion="Lista de Precios de Enero 2012.", FechaDePublicacion="/Date(1326859200000)/"}

1
    Object { ImagenChicaUrl="http://www.dss.com.bo/img/iniciopro/can01.JPG", Descripcion="Una neuvo proyecto en el sistema!", FechaDePublicacion="/Date(1326168000000)/"}

2
    Object { ImagenChicaUrl="http://www.dss.com.bo/img/iniciopro/can01.JPG", Descripcion="asdfasdfasdfasdf", FechaDePublicacion="/Date(1326081600000)/"}

3
    Object { ImagenChicaUrl="http://www.dss.com.bo/img/iniciopro/can01.JPG", Descripcion="qwefqwef", FechaDePublicacion="/Date(1325563200000)/"}

4
    Object { ImagenChicaUrl="http://www.dss.com.bo/img/iniciopro/can01.JPG", Descripcion="asdfasdf", FechaDePublicacion="/Date(1323057600000)/"} */
                },
                error: function (obj) {
                    alert("bad!");
                }
            });
        });
    });
</script>

我想为JSON结果中返回的每个对象创建一个li元素：

<li>
    <img src="ImageChicaUrl" alt="@miniNoticia.Descripcion"/>
    <a href="#">FechaPublicacion</a>
    <p>Descripcion</p>
    <div class="horizontal-line" />
</li> 

我不确定如何遍历每个JSON对象，然后访问它的变量。有什么建议吗？

Answer 1

尝尝这个

var $liContainer = $('div.images');
var data;//data returned from the ajax response
$.each(data, function(i, val){

   $liContainer.append('<li>' +
        '<img src="' + val.ImagenChicaUrl + '" alt="' + val.Descripcion + '"/>' +
        '<a href="#">' + val.FechaDePublicacion + '</a>' +
        '<p>' + val.Descripcion + '</p>' +
         '<div class="horizontal-line" />' +
    '</li>');
});