Question

When someone clicks on a page number on my little widget box, I fire out a request that returns a JSON result.

<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>

I want to create a li element for every object returned in the JSON result:

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

I’m not sure how to iterate through each JSON object, and then access it’s variables. Any suggestions?

Answer 1

Try this

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