Question

I am retrieving a JSON array and displaying the results as a list that is ten items long. However, if there are less than ten results found then it loops over with the first row again.

My code:

$.ajax({
    url: 'http://www.entertainmentcocktail.com/cp/index.php?area=bn2',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status){

        var n = 0;

        while(n<10){            
        $.each(data, function(i,item){
            var places = item.name +
            ' where you can get' +
            ' a pint of <em>'+item.pint+'</em> for only ' +
            '<span>£'+item.cost+'!</span>';
            $('#placeList').append('<li id="listitem">'+ places +'</li>');
            n++;
        });
        }
    }
});

How can I get the code to display either the first ten rows OR all rows received depending on which is fewer?

Answer 1

This is all you need:

success: function(data, status){    
    $.each(data, function(i,item){
        var places = item.name +
        ' where you can get' +
        ' a pint of <em>'+item.pint+'</em> for only ' +
        '<span>£'+item.cost+'!</span>';
        if (i < 10) {
            $('#placeList').append('<li id="listitem">'+ places +'</li>');
        }
    });
}