How To Display A List Of Images From A JSON Object

December 4, 2013 Maria C. Lima

JSON, which was introduced by Doug Crockford in 2006, is an alternative to XML to make content available to users on the Web. Here is a coding approach on how to display a collection of images on a web page:

Demo

Resources

  1. Dependency. The jQuery Library can be included in the head of the html document.
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    
  2. JSON object. We assigned the JSON object to a variable, which was defined as var data, as shown in the JavaScript section below.

Utilities

  1. .jQuery.each( collection, callback(indexInArray, valueOfElement) )
  2. .append( content [, content ] )

Description

We used the jQuery.each() function to iterate over the JSON object and appended the returned content to the target container. The styles are provided below.

JavaScript

<script>
(function($) {

    $(function(){ // ON DOM READY

        var data = {
            "response": {
                "docs": [{
                    "content_type": "article",
                        "date": "2013-12-04T14:30:43Z",
                        "description": "<p></p>",
                        "image_url": [
                        "\/wp-content\/themes\/mcl\/images\/nyc01.jpg"],
                        "title": "NYC image No. 1",
                        "url": [""]
                }, {
                    "content_type": "article",
                        "date": "2013-12-04T12:30:55Z",
                        "description": "<p></p>",
                        "image_url": [
                        "\/wp-content\/themes\/mcl\/images\/nyc02.jpg"],
                        "title": "NYC image No. 2",
                        "url": [""]
                }, {
                    "content_type": "article",
                        "date": "2013-12-02T05:24:37Z",
                        "description": "<p></p>",
                        "image_url": [
                        "\/wp-content\/themes\/mcl\/images\/nyc03.jpg"],
                        "native_id": "",
                        "title": "NYC image No. 3",
                        "url": [""]
                }]
            }
        }, data = data.response.docs,
            target = $('#target'),
            html;

        $.each(data, function (key, val) {
            html = '<div class="image-list">';
            html += '<img src ="' + val.image_url + '" class="image-styles" />';
            html += '<p class="image-title">' + val.title + '</p>';
            html += '</div>';
            target.append(html);
        });

    }); // end of on DOM READY

}(jQuery));
</script>

HTML

<div id="target"></div>

CSS

<style>
.image-list {
    position:relative;
    float: left;
    display:inline;
}
.image-styles {
    margin:15px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.image-title {
    background:#000;
    width:80%;
    position:absolute;
    bottom:15px;
    left:15px;
    color:#f7f7f7;
    text-align:center;
    padding:2px;
    opacity:0.6;
    filter:alpha(opacity=60);
    /* For IE8 and earlier */
}
</style>

, , ,
Maria C. Lima

Maria C. Lima

Maria is an esteemed and celebrated independent web developer based in New York City. Her design and development work show tremendous passion and insight, which she brings to all of her clients and projects with love, professionalism, and an esteemed work ethic admired by all who partner with Maria.