Question

I have valid data in jquery, how to I loop every item I get back and display it in html container div. Thanks

ie.

item 1
image 123
Item 2
Image 123

{"ERRORS":[],"DATA":[{"itemValidFrom":"October, 25 2011 00:00:00","itemActive":true,"itemTxt":"test","itemID":"30d2f2c1-58ca-4b3d-b3e0-d284ae5b25ab","itemValidTo":"October, 19 2011 00:00:00","itemName":"test","itemModified":"October, 05 2011 00:00:00","itemCreated":"October, 03 2011 00:00:00","image":{"imageCreated":"October, 05 2011 00:00:00","imageURL":"firefox-girl.jpg","imageID":"bc869a94-fee5-4fc8-bd21-e2de2f020310"}],"MESSAGES":[{"CURRENTPAGE":1.0,"TOTALPAGES":1.0}]}

<script type="text/javascript">
    jQuery(document).ready(function(){

    jQuery.ajax({
    type: 'get',
    url: 'api/default.php/id/0f4addd8',
    data: 'apiKeytest=182j&?perPage=2&currentPage=1',
    dataType: "json",
    context: document.body,
    success: function(r) {
    jQuery('#posts-container').replaceWith(r);
            console.log(r);
                        }

    });

    });

</script>


<!-- Widget HTML Starts Here -->
<div id="posts-container">
    <!-- Posts go inside this DIV -->
    <div id="posts"></div>
    <!-- Load More "Link" -->
    <div id="load-more">Load More</div>
</div>
<!-- Widget HTML Ends Here -->

Answer 1

You can loop through the json data with a for loop and build your custom output to append to the DOM:

success: function(r) {
    var output = '';
    for (a in r.DATA) {
        for (b in r.DATA[a]) {
            if (typeof(r.DATA[a][b]) == 'object') {
                for (c in r.DATA[a][b]) {
                    output += c + ' = ' + r.DATA[a][b][c] + '<br />';
                }
            } else {
                output += b + ' = ' + r.DATA[a][b] + '<br />';
            }
        }
    }
    jQuery('#posts-container').append(output);
}

a corresponds to each key in the object returned by your ajax call.

I created a jsfiddle of the above code and noticed that there is an error in the json output you posted in your question; a closing bracket (}) was omitted from the end of the DATA array (which has only one key, 0).

Here is the link to the jsfiddle: http://jsfiddle.net/EpjyH/1/