Is there conditional looping with $.each function in jQuery

Question

I have a query about jQuery's $.each method. Below is my ajax which is working quite well:

$.ajax({
    url:'js/people-json.js',
    type:'post',
    dataType:'json',
    success:function(data){
        $.each(data.names, function(i, data) {
            console.log(data);
        });
    },
    error:function(err){
        console.log(err);
    }
});

This script is working fine and giving me the JSON results which I wanted to get. However this is giving me results but this is a long list of information I have stored in an external JS file with a JSON format that looks like this:

{
"people": [
    {
        "name": "aaa",
        "age": 32,
        "email": "aaa@abc.xyz"
    },
    {
        "name": "bbb",
        "age": 21,
        "email": "bbb@abc.xyz"
    },
    {
        "name": "ccc",
        "age": 45,
        "email": "ccc@abc.xyz"
    },
    ..............lot of more here around 8000
  ]
}

Is there way to loop in jQuery either this way:

$.each(data.names<=200, function(i, data) {
    console.log(data);
});

or this way:

$.each(data.names, function(i<=200, data) {
    console.log(data);
});

or this one:

$.each(data.names, function(i, data<=200) {
    console.log(data);
});

Can we loop with 200 results at first load and then with click of a button loop with another 200 and so on.

Note: I would prefer jQuery solution for this.

No... I recommend to use a normal `for` loop. Lets you easily set the start and end index. — Felix Kling, Dec 21 '12 at 05:56
Is that a static or dynamic set of information? If it's dynamic, wouldn't you want to actually just fetch through ajax the amount you want to display? Why load all 8000? I'm referring to like the common "Show more" you see on FB. If what you are doing is displaying that in a paged table/grid there are simpler solutions than to do it manually I think, like this one: http://datatables.net/ — Pablo Romeo, Dec 21 '12 at 06:18
@PabloRomeo Its `Static` and client want to store it in a external js. — Jai, Dec 21 '12 at 06:20
Oh, I see. Well, you can still use a paged list against it. Now if you need something different then just use a standard for loop, and manage the indexes yourself as you go displaying more data. — Pablo Romeo, Dec 21 '12 at 06:23
@PabloRomeo Yes thats the last option for me i know, just wanted to know is there possibilities like i mentioned in the Que, I just love jquery and wanted to learn more. — Jai, Dec 21 '12 at 06:25

jfriend00 · Accepted Answer · 2012-12-21T06:08:39.857

In direct answer to your question, No.

.each() iterates all items in the collection. It does not offer a filtering option. You will just filter yourself like this and change the value in the if statement for each click:

$.each(data, function(i, data) {
    if (i <= 200) {
        console.log(data);
    }
});

Or, if data is an array, you could extract the first 200 and iterate them:

$.each(data.slice(0, 200), function(i, data) {
    console.log(data);
});

Or, if data is an array, a for loop will give you more flexibility:

for (var i = 0; i < 200; i++) {
    console.log(data[i]);
}

If you're trying to do 200 items each click, then you need to explain more about what you're doing. Are you getting all results from the ajax call? If so, they you don't want to be refetching them each time. Just store all the results and process the next 200 each time. Keep a counter variable that indicates how many you've processed so far.

var data = [...];
var dataIterationCnt = 0;

function getNextChunk(n) {
    var end = Math.min(dataIterationCnt + n, data.length)
    for (var i = dataIterationCnt; i < end; i++) {
        console.log(data[i]);
    }
    dataIterationCnt = i;
    return(dataIterationCnt < data.length);
}

// then in your code, you just call getNextChunk(200)
// until it returns null which means it has no more to iterate
var more = getNextChunk(200);

I understand the question so that the OP wants to iterate over the first 200 elements at the first click, the second 200 at the second click, etc. But I could be wrong. — Felix Kling, Dec 21 '12 at 05:59
@FelixKling - I added some more to my answer along that line, but the OP wasn't very specific about the details of what they are trying to do. — jfriend00, Dec 21 '12 at 06:03

Beetroot-Beetroot · Answer 2 · 2012-12-21T07:17:08.493

Sticking with jQuery, the simplest approach is to loop through all items in data.names, up to the last item in the batch, rejecting those items prior to the start of the batch.

var nameObj = {
    index: 0,
    batchSize: 200
};
function nextNamesBatch() {
    $.each(data.names, function(i, data) {
        if(i < nameObj.index) return true;//==continue
        if(i >= nameObj.index + nameObj.batchSize) return false;//==break
        console.log(data);
    });
    nameObj.index += nameObj.batchSize;
}

Yes, there's an increasing efficiency issue as the batches progress but I believe that, for moderate size arrays, the overhead will be less than that in the alternative jQuery approach, namely to throttle data.names (or a clone of it) prior to $.each(...).

score -2 · Answer 3 · answered Dec 21 '12 at 06:10

-2

it can be like this on the basis of the tag.. or list of the data, can you please try and tell whether it is helpful..

$('li').each(function(index) {
    alert(index + ': ' + $(this).text());
});

please apply some logic like this and test..

answered Dec 21 '12 at 06:10

Karthika Subramanian

346
1
2
16

1

plz go through the question again. – Jai Dec 21 '12 at 06:49

Is there conditional looping with $.each function in jQuery

3 Answers3

Linked