$.ajax Test

by salitrapraveen

HTML

<div>
<ul>
    <li><a href="#" id="all-deals">All Deals</a></li>
    <li><a href="#">Type1</a></li>
    <li><a href="#">Type2</a></li>
    <li><a href="#">Type3</a></li>
    </ul>
    
    </div>

CSS

table {
 border: 1px solid black;   
}

tr {
 line-height: 25px;   
}

tr:hover {
 background: #25CDF7;   
}

JavaScript

$(function() {

    var grouponURL = 'http://api.groupon.com/v2/channels/getaways/deals?client_id=54f23963b21f96775b1f131177688d5e49c4b9e2&show=title,status,largeImageUrl,mediumImageUrl,isTipped,tippingPoint,endAt,dealUrl,merchant,isSoldOut,tippedAt,soldQuantity,options,announcementTitle,tags HTTP/1.1';
    var myObj = null;

    $('#all-deals').click(function() {
        fun();
    });


    var fun = function() {
        $.ajax({
            url: grouponURL,
            dataType: 'jsonp',
            success: function(response) {
               console.log(response);
               var $table = $('<table/>').appendTo($('body'));
                $.each(response.deals, function(i){
                        var $tr = $('<tr/>').appendTo($table);
                        $('<td/>').text(response.deals[i].announcementTitle).appendTo($tr);                               
                
                });
                    
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
            }
        });

    };

    


});