[javascript] How to loop through array in jQuery?

I am trying to loop through an array. I have the following code:

 var currnt_image_list= '21,32,234,223';
 var substr = currnt_image_list.split(','); // array here

Am trying to get all the data out of the array. Can some one lead me in the right path please?

No need for jquery here, just a for loop works:

var substr = currnt_image_list.split(',');
for(var i=0; i< substr.length; i++) {
  alert(substr[i]);
}

ES6 syntax with arrow function and interpolation:

var data=["a","b","c"];
$(data).each((index, element) => {
        console.log(`current index : ${index} element : ${element}`)
    });

  for(var key in substr)
{
     // do something with substr[key];

} 

Try this:

$.grep(array, function(element) {

})

jQuery.each()

jQuery.each()

jQuery.each(array, callback)

array iteration

jQuery.each(array, function(Integer index, Object value){});

object iteration

jQuery.each(object, function(string propertyName, object propertyValue){});

example:

var substr = [1, 2, 3, 4];_x000D_
$.each(substr , function(index, val) { _x000D_
  console.log(index, val)_x000D_
});_x000D_
_x000D_
var myObj = { firstName: "skyfoot"};_x000D_
$.each(myObj, function(propName, propVal) {_x000D_
  console.log(propName, propVal);_x000D_
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

javascript loops for array

for loop

for (initialExpression; condition; incrementExpression)
  statement

example

var substr = [1, 2, 3, 4];_x000D_
_x000D_
//loop from 0 index to max index_x000D_
for(var i = 0; i < substr.length; i++) {_x000D_
  console.log("loop", substr[i])_x000D_
}_x000D_
_x000D_
//reverse loop_x000D_
for(var i = substr.length-1; i >= 0; i--) {_x000D_
  console.log("reverse", substr[i])_x000D_
}_x000D_
_x000D_
//step loop_x000D_
for(var i = 0; i < substr.length; i+=2) {_x000D_
  console.log("step", substr[i])_x000D_
}

for in

//dont really wnt to use this on arrays, use it on objects
for(var i in substr) {
    console.log(substr[i]) //note i returns index
}

for of

for(var i of subs) {
    //can use break;
    console.log(i); //note i returns value
}

forEach

substr.forEach(function(v, i, a){
    //cannot use break;
    console.log(v, i, a);
})

Resources

MDN loops and iterators

Option 1 : The traditional for-loop

The basics

A traditional for-loop has three components :

1. the initialization : executed before the look block is executed the first time
2. the condition : checks a condition every time before the loop block is executed, and quits the loop if false
3. the afterthought : performed every time after the loop block is executed

These three components are seperated from each other by a ; symbol. Content for each of these three components is optional, which means that the following is the most minimal for-loop possible :

for (;;) {
    // Do stuff
}

Of course, you will need to include an if(condition === true) { break; } or an if(condition === true) { return; } somewhere inside that for-loop to get it to stop running.

Usually, though, the initialization is used to declare an index, the condition is used to compare that index with a minimum or maximum value, and the afterthought is used to increment the index :

for (var i = 0, length = 10; i < length; i++) {
    console.log(i);
}

Using a tradtional for-loop to loop through an array

The traditional way to loop through an array, is this :

for (var i = 0, length = myArray.length; i < length; i++) {
    console.log(myArray[i]);
}

Or, if you prefer to loop backwards, you do this :

for (var i = myArray.length - 1; i > -1; i--) {
    console.log(myArray[i]);
}

There are, however, many variations possible, like eg. this one :

for (var key = 0, value = myArray[key], var length = myArray.length; key < length; value = myArray[++key]) {
    console.log(value);
}

... or this one ...

var i = 0, length = myArray.length;
for (; i < length;) {
    console.log(myArray[i]);
    i++;
}

... or this one :

var key = 0, value;
for (; value = myArray[key++];){ 
    console.log(value);
}

Whichever works best is largely a matter of both personal taste and the specific use case you're implementing.

Each of these variations is supported by all browsers, including véry old ones!

Option 2 : The while-loop

One alternative to a for-loop is a while-loop. To loop through an array, you could do this :

var key = 0;
while(value = myArray[key++]){
    console.log(value);
}

Like traditional for-loops, while-loops are supported by even the oldest of browsers.

Also, every while loop can be rewritten as a for-loop. For example, the while-loop hereabove behaves the exact same way as this for-loop :

for(var key = 0;value = myArray[key++];){
    console.log(value);
}

Option 3 : for...in and for...of

In JavaScript, you can also do this :

for (i in myArray) {
    console.log(myArray[i]);
}

This should be used with care, however, as it doesn't behave the same as a traditonal for-loop in all cases, and there are potential side-effects that need to be considered. See Why is using "for...in" with array iteration a bad idea? for more details.

As an alternative to for...in, there's now also for for...of. The following example shows the difference between a for...of loop and a for...in loop :

var myArray = [3, 5, 7];
myArray.foo = "hello";

for (var i in myArray) {
  console.log(i); // logs 0, 1, 2, "foo"
}

for (var i of myArray) {
  console.log(i); // logs 3, 5, 7
}

You also need to consider that no version of Internet Explorer supports for...of (Edge 12+ does) and that for...in requires at least IE10.

Option 4 : Array.prototype.forEach()

An alternative to For-loops is Array.prototype.forEach(), which uses the following syntax :

myArray.forEach(function(value, key, myArray) {
    console.log(value);
});

Array.prototype.forEach() is supported by all modern browsers, as well as IE9+.

Option 5 : jQuery.each()

Additionally to the four other options mentioned, jQuery also had its own foreach variation.

It uses the following syntax :

$.each(myArray, function(key, value) {
    console.log(value);
});

You can use a for() loop:

var things = currnt_image_list.split(','); 
for(var i = 0; i < things.length; i++) {
    //Do things with things[i]
}

Use jQuery each(). There are other ways but each is designed for this purpose.

$.each(substr, function(index, value) { 
  alert(value); 
});

And do not put the comma after the last number.

Alternative ways of iteration through array/string with side effects

var str = '21,32,234,223';_x000D_
var substr = str.split(',');_x000D_
_x000D_
substr.reduce((a,x)=> console.log('reduce',x), 0)        // return undefined_x000D_
_x000D_
substr.every(x=> { console.log('every',x); return true}) // return true_x000D_
_x000D_
substr.some(x=> { console.log('some',x); return false})  // return false_x000D_
_x000D_
substr.map(x=> console.log('map',x));                    // return array_x000D_
 _x000D_
str.replace(/(\d+)/g, x=> console.log('replace',x))      // return string

Use the each() function of jQuery.

Here is an example:

$.each(currnt_image_list.split(','), function(index, value) { 
  alert(index + ': ' + value); 
});