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