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