JQuery - Break out of $.each

Question

I am trying to break out the following loop when I have retrieved 10 items from data:

var counter = 1;

$.ajax({
        url:'http://api.8coupons.com/v1/getchainstorelist?key=' + apiCode,
        dataType:'jsonp',           
        success: function(data){

        //create drop-down box
        var s = $('<select/>',{id:"chainStores"});

        $.each(data, function(key, value) {

            $('<option/>', {text: value.name}).appendTo(s);

            ++counter;

            // After finding 10 stores, break.
            if (counter == 10)
                return false;           
    });

However, it doesn't seem to be stopping after getting 10 items. It seems to be retrieving everything. I initially tried using break but received a syntax error.

Thank you for your help.

is your counter incrementing - I thought it should be `counter++;` — Pete, Nov 05 '13 at 14:46
@Pete: That wouldn't make an observable difference for that particular line of code. — David, Nov 05 '13 at 14:47
Are you sure something else isn't modifying `counter`, or that the conditional statement is being evaluated at all? `return false;` seems to do the trick: http://jsfiddle.net/yLBd7/ — David, Nov 05 '13 at 14:51
I'm with David - as counter seems to be global it could start off over 10 if something else uses a var called counter which would mean that == 10 never equates — Pete, Nov 05 '13 at 14:51

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

It's not obvious to me what is wrong in your code but you don't need a counter because you have already key in your function, which represents the index of the array in the loop and you are setting counter = 1 but it starts from 0. If you run following example,

var data = [ {}, {}, {}, {}, {} ];
$.each(data, function(key, value) {
    if (key == 3) {
        console.log('Terminated...');
        return false;           
    }
    console.log(key);
});

Result will be

0

1

2

Terminated...

So, your code should work but the problem is in somewhere else. In you case, you may try this instead

var s = $('<select/>',{ id:"chainStores" } );
$.each(data, function(key, val) {
    $('<option/>', {value:val.value, text: val.name}).appendTo(s);
    if (key >= 9) return false;           
});
$('body').append(s); // append to the body

Also, notice the value attribute in options, that you probably skipped or forgot.

Thanks RCV. This worked... There must have been something up with my `counter` variable. It's strange, because `counter` was not altered anywhere else in this file... — , Nov 05 '13 at 16:43

score 0 · Answer 2 · answered Nov 05 '13 at 14:54

0

You don't need to use a counter. You can splice the array to the max length you need.

$.ajax({
    url:'http://api.8coupons.com/v1/getchainstorelist?key=' + apiCode,
    dataType:'jsonp',           
    success: function(data) {
        var s = $('<select/>',{id:"chainStores"});
        data = (data.length > 10) ? data.splice(0,10) : data;
        $.each(data, function(key, value) {
            $('<option/>', {text: value.name}).appendTo(s);
        });
});

answered Nov 05 '13 at 14:54

Reactgular

52,335
19
158
208

@JanDvorak he likely already has a ` – Reactgular Nov 05 '13 at 15:01
@JanDvorak on second thought. I have no idea. I would just tell him `this isn't the bug you think is the bug`. – Reactgular Nov 05 '13 at 15:07

score 0 · Answer 3 · answered Nov 05 '13 at 15:01

0

$.ajax({
    url:'http://api.8coupons.com/v1/getchainstorelist?key=' + apiCode,
    dataType:'jsonp'
}).done(function(data){
    //create drop-down box
    var s = $('<select/>',{id:"chainStores"});
    $(data).slice(0,10).each(function(key, value) {
        $('<option/>', {text: value.name}).appendTo(s);
    });
});

answered Nov 05 '13 at 15:01

shawnzhu

7,233
4
35
51

http://stackoverflow.com/questions/8840257/jquery-ajax-handling-continue-responses-success-vs-done – Reactgular Nov 05 '13 at 15:02

JQuery - Break out of $.each

3 Answers3