jquery each function and array show undefined in a for loop

Question

This is the html part for my problem

<DIV ID="CONTAINER">
    <DIV CLASS="ITEMS">
        Purchase
    </DIV>
    <DIV CLASS="ITEMS">
        Return
    </DIV>
    <DIV CLASS="ITEMS">
        On Hold
    </DIV>
    <DIV CLASS="ITEMS">
        Exchange
    </DIV>
</DIV>

Jquery

var MyArray = [];  
var $Items = $('.ITEMS');
$Items.each( 
  function(){
    Value = $.trim($(this).html());
    MyArray.push(Value);
  }
);
var Count_Parts = MyArray.length;            
for (i = 1; i <= Count_Parts; i++ ){
  console.log(MyArray[i]);
}

My Problem is that the console does not show correct results i see Return, On Hold, Exchange, undefined..... It is skipping Purchase and showing undefined instead? Why is Purchase being undefined?

Your for loop... change it to for (i = 0; i < Count_Parts; i++ ) Arrays are zero indexed... — PSL
– PSL, Commented Sep 11, 2013 at 2:55
"JavaScript arrays are zero-indexed; the first element of an array is actually at index 0, and the last element is at the index equal to the value of the array's length property minus 1." — Jonathan Lonowski
– Jonathan Lonowski, Commented Sep 11, 2013 at 2:57

Steve Papa · Accepted Answer · 2013-09-11 02:58:12Z

1

Your code for the most part is correct, it is pushing the correct value for all items into the array. The for loop you are using is not iterating as you expect. If you look at this line:

for (i = 1; i <= Count_Parts; i++ ){

You are starting the loop at the number 1 and asking it to stop when it is less than or equal to Count_Parts (which is is 4). Now when you access elements in the array you are accessing elements 1,2,3,4. The array however begins at 0, and has elements stored at 0,1,2,3.

The correct implementation would be:

for (i = 0; i < Count_Parts; i++ ){

This starts your loop at 0 and will only run while i is less than the count. So it will access, 0,1,2,3 which is where the array has all elements stored.

The complete portion of your code with the correction is:

var MyArray = [];  
var $Items = $('.ITEMS');
$Items.each( 
  function(){
    Value = $.trim($(this).html());
    MyArray.push(Value);
  }
);
var Count_Parts = MyArray.length;            
for (i = 0; i < Count_Parts; i++ ){
  console.log(MyArray[i]);
}

JsFiddle: http://jsfiddle.net/MQBnW/

answered Sep 11, 2013 at 2:58

Steve Papa

4222 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R P Over a year ago

thank you for explaining in such great detail i will like your answer when i am allowed

Arun P Johny · Accepted Answer · 2013-09-11 02:56:21Z

0

Array index starts from 0...(length -1 )

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

Demo: Fiddle

answered Sep 11, 2013 at 2:56

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

jquery each function and array show undefined in a for loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related