Is there a conditional loop with $ .each function in jQuery
I have a request for a jQuery method $.each
. Below is my ajax which works well enough:
$.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 works great and gives me the JSON results I wanted. It does give me results, however, but it's a long list of information that I have stored in an external JS file with 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 a way to loop in jQuery either like this:
$.each(data.names<=200, function(i, data) {
console.log(data);
});
or as follows:
$.each(data.names, function(i<=200, data) {
console.log(data);
});
or this one:
$.each(data.names, function(i, data<=200) {
console.log(data);
});
Is it possible to loop with 200 results on the first load and then with a press of the loop button with another 200, etc.
Note. I would prefer a jQuery solution for this.
source to share
In a direct answer to your question, no.
.each()
iterates over all the elements in the collection. It doesn't offer filtering. You 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 can extract the first 200 and iterate over them:
$.each(data.slice(0, 200), function(i, data) {
console.log(data);
});
Or, if data
is an array, the loop for
will give you more flexibility:
for (var i = 0; i < 200; i++) {
console.log(data[i]);
}
If you're trying to make 200 points every click, you need to explain more about what you are doing. Are you getting all the results from the ajax call? If so, you don't want them to check them every time. Just save all the results and process the next 200 each time. Store a counter variable that shows how much you have already processed.
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);
source to share
When using jQuery, the easiest way is to look at all of the elements in data.names
, down to the last element in the batch, rejecting those elements before starting 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, an issue with efficiency gains as packages advance, but I believe there will be less overhead for medium sized arrays than in an alternative jQuery approach, namely throttling data.names
(or a clone of it) to $.each(...)
.
source to share