Question

We’re using jQuery, jQuery templates and the Wufoo jQuery API to display data from our forms, using the following code:

<div id="people">           
    <ul>
        <script id="attendeeTemplate" type="text/x-jquery-tmpl">
            <li>
                <h4>${Field1}</h4>
                ${Field3} minutes
            </li>
             </script>
    </ul>
</div>

This works nicely, however we would like to limit it to displaying only the first 10 entries. Right now it is displaying every entry in the database (sorted using the JavaScript and API below). Note that we’re trying only to show the top 10, sorted by highest number of minutes to lowest.

Here is the JavaScript:

<script>
    function processEntries(data) {
        $.each(data.Entries, function(entriesIndex, entriesObject) {
            // Make sure this entry has all the required bits
            if (entriesObject.Field1 && entriesObject.Field3) {
                $("#attendeeTemplate").tmpl(entriesObject).appendTo("#people ul");  
            }
        });
    };

    $.wufooAPI.getEntries({
        "callback"   : processEntries,             // Name of custom function declared above
        "formHash"   : "BLAH",                   // Found by clicking "Code" button from the Form Manager, then the "API Information" button
        "sortID"   : "Field3",                   // Found by clicking "Code" button from the Form Manager, then the "API Information" button
        "sortDirection"   : "DESC",                   // Found by clicking "Code" button from the Form Manager, then the "API Information" button

    });
</script>

Any thoughts on how to limit it to the top 10 would be super helpful!

Answer 1

Assuming that data.Entries is an array, you could use Array.slice():

$.each(data.Entries.slice(0, 9), function(entriesIndex, entriesObject) {