Book Project: Ideas #3

AJAX API REQUEST PARSING

by lasha

HTML

<div class="photo-thumbs-container">
    <!-- Thumbs will inject here... -->
</div>

<!-- // Possibly incorporate some form of lazy loading, whether it's with a plugin or not.... -->

CSS

.card {
    /* float: left; */
    padding: 10px;
    background-color: #ececec;
    overflow: auto;
    margin-bottom: 10px;
}
.card img {
    float: left;
    margin-right: 10px;
}
.card h2 {
    font-family: helvetica, sans-serif;
    margin: 0;
    font-size: 16px;
    float: left;
    width: calc(100% - 180px);
}

JavaScript

$.ajax({
    url: "http://jsonplaceholder.typicode.com/albums/1/photos",
    type: "GET",
    dataType: "json"
}).done(function(response){
    $(response).each(function(i, el){
        var $this = $(this);
        
        $(".photo-thumbs-container").append("<div class='card'><img src='"+ el.thumbnailUrl +"'><h2>"+ el.title +"</h2>"+ el.url +"</div>");
    });
    
    // do something with response
    /* this is a sample response
    [{
      "albumId": 1,
      "id": 1,
      "title": "accusamus beatae ad facilis cum similique qui sunt",
      "url": "http://placehold.it/600/92c952",
      "thumbnailUrl": "http://placehold.it/150/30ac17"
    }, {
      "albumId": 1,
      "id": 2,
      "title": "reprehenderit est deserunt velit ipsam",
      "url": "http://placehold.it/600/771796",
      "thumbnailUrl": "http://placehold.it/150/dff9f6"
    }];
    end of sample response */
});;