Show at least one online item from array

Question

I have an array of users which i have sorted by distance. I want to display the 5 nearest items but sometimes the 5 nearest items all have "offline" state, in which case i want to ensure at least 1 "online" item is added also.

Here is my attempt so far which isn't quite working. It didn't show the 5 "offline" items plus 1 "online" item like i wanted, it showed all.

var items = 0;
var online = usersOnline();
var itemsOnline = 0;
for (var i = 0; i < nearest.length; i++) {
    var item = nearest[i];
    if ( items < 5 ) { 
        items++;
        if ( item.state != "offline" ) { itemsOnline++; }
        jQuery( "#leaflet-control-geosearch-results" ).append( "<li id='record-"+item.label+"'><label><input type='checkbox' class='cb' value='"+item.id+"'>&nbsp;<img src='img/presence/"+item.state+"_map.png' height='10px'> "+item.label+" ("+parseFloat(item.distance  / 1000).toFixed(2)+strings[strLang].nearestMetre+")</label><div class='icons'><a title='"+strings[strLang].nearestLocate+"' class='locate' href='"+item.label+"'><img src='img/icons/locate.png' height='15px' /></a>&nbsp;<a title='"+strings[strLang].routeGet+"' class='directions' href='"+item.label+"'><img src='img/icons/directions.png' height='15px' /></a></div><div class='clear'></div></li>" );
    }
}
while (( online > 0 ) && ( itemsOnline < 1 )) {
    for (var i = 0; i < nearest.length; i++) {
        var item = nearest[i];
        if ( item.state != "offline" ) { 

            itemsOnline++; }
            jQuery( "#leaflet-control-geosearch-results" ).append( "<li id='record-"+item.label+"'><label><input type='checkbox' class='cb' value='"+item.id+"'>&nbsp;<img src='img/presence/"+item.state+"_map.png' height='10px'> "+item.label+" ("+parseFloat(item.distance  / 1000).toFixed(2)+strings[strLang].nearestMetre+")</label><div class='icons'><a title='"+strings[strLang].nearestLocate+"' class='locate' href='"+item.label+"'><img src='img/icons/locate.png' height='15px' /></a>&nbsp;<a title='"+strings[strLang].routeGet+"' class='directions' href='"+item.label+"'><img src='img/icons/directions.png' height='15px' /></a></div><div class='clear'></div></li>" );
        }
    }                           
}   

Answer 1

You should be able to do the whole thing with just one pass/loop:

Try:

var items = 0;
var online = usersOnline();
var itemsOnline = 0;

for (var i = 0; i < nearest.length; i++) {
    var item = nearest[i];

    if (item.state != "offline") {
        itemsOnline++;
    } else if (items >= 5) {
        // we already have 5 items, so we're now only interested in online items. this new one is an offline one, so skip it
        continue;
    }

    items++;
    jQuery( "#leaflet-control-geosearch-results" ).append( "<li id='record-"+item.label+"'><label><input type='checkbox' class='cb' value='"+item.id+"'>&nbsp;<img src='img/presence/"+item.state+"_map.png' height='10px'> "+item.label+" ("+parseFloat(item.distance  / 1000).toFixed(2)+strings[strLang].nearestMetre+")</label><div class='icons'><a title='"+strings[strLang].nearestLocate+"' class='locate' href='"+item.label+"'><img src='img/icons/locate.png' height='15px' /></a>&nbsp;<a title='"+strings[strLang].routeGet+"' class='directions' href='"+item.label+"'><img src='img/icons/directions.png' height='15px' /></a></div><div class='clear'></div></li>" );

    if (items >= 5 && itemsOnline >= 1) {
        // we've now got at least 5 items, and at least 1 is online, so we're done.
        break;
    }
}

Answer 2

Your while loops condition only gets evaluated after the inner for loop has completed iterating through the entire nearest array.

Since you only need to itterate the through the nearest array once to get an online item, you can replace the while loop with an if statement:

if (itemsOnline < 1) {
    for (var i = 5; i < nearest.length; i++) { // start from 6th element
        var item = nearest[i];
        if (item.state != "offline") {
            jQuery("#leaflet-control-geosearch-results").append(etc);
            break; // exit loop
        }
    }
}

Answer 3

var items = 0;
var online = usersOnline();
var itemsOnline = 0;
for ( var i = 0; i < nearest.length && items < 5; i++, items++ ) {
    var item = nearest[i];
    items++;
    if ( item.state != "offline" ) { itemsOnline++; }
    apendItem( item );
}
for ( var i = 5; i < nearest.length && itemsOnline < 1; i++ ) {
    var item = nearest[i];
    apendItem( item );
    break;
}