Javascript Arrays In IE 8 issue

Question

As per what I know, arrays in Javascript is nothing but the combination of methods and objects.

Now my task is to display the values of array (say y_array)

I have used for(x in y_array) and then displayed the value.

In mozilla and in IE its working fine, but in IE it displays the first element of array with index as indexOf and value is indexOf(obj, from) which i dont want.

I tried

if(x!='indexOf') {  display the array value ; }

It worked and things were fine but there is extensive use of arrays been displayed and I am looking for some permanent fix rather than this hardcoded one.

Can anyone please help me?

Answer 1

You are not the first mixing up arrays and objects. SO should contain a FAQ for this kind of questions ;)

Let's try to explain things:

An array is a row of values, which can be retrieved using their position in the row. The order of the array values is fixed (and may be reordered).

An object is a variable that contains named properties in the form of key-value pairs. The order of the key-value pairs belonging to an object is arbitrary.

An array looks like: [ 'first', 'second', 'third', ..., 'nth' ]
An object looks like: { first:'firstvalue', second:'secondvalue', ..., nth:'nthvalue' }

The first element of an array is the element with index 0 (so the first position in the row has index value 0). You retrieve it using myArray[0]

An object is unordered, so it has no first element. You retrieve any element from it using myObject.somekey or myObject['somekey'].

For arrays you use a loop iterating through the numbered index until the end of the array is reached:

var i=0, len = myArray.length;
for ( i; i<len; i++ ) {
     //do something with >>> myArray[i] <<<
}

For objects you use a loop using the key and the in operator (making sure you are only retrieving user defined properties of the object with the .hasOwnAttribute method):

for ( var key in myObject ){
  if (myObject.hasOwnProperty(key)) {
     // do something with >>> myObject[key] <<<
  }
}

Basically, think of an array as a cupboard with drawers, each containing a value. An object can be imagined as a pile of boxes with stickers on the lid, describing the content of the box. Retrieving something from an object, you ask: is there a box with sticker y in pile x and if so, what's in it? Retrieving something from an array, you ask: please give me the contents of drawer nr x.

Now as to your question: the array you are retrieving values for with a for..in loop contains a user defined method, namely indexOf. Using the object style loop for it, the array is treated as object, and the indexOf key (with value like function(){...} I bet) is shown too. IE That's why it may be better to use a traditional for loop with a numeric index when iterating over arrays.

Why is this only in IE? In modern browsers indexOf is a native method of the Array prototype, and native methods are not shown (unless you loop through their prototype that is). IE < 9 doesn't have a native indexOf method for arrays. Somewhere in the scripting you use the method has been added to the Array prototype as a user defined extension.

Bottom line for your problem: don't use for ... in to loop through the values of an array.

Answer 2

For arrays you should use this for loop:

var y_array = [1,2,3,4];
for (var i = 0; i < y_array.length; i++) {
  var value = y_array[i];
  // do what you want
  alert(i + ': ' + value);
}

For objects (objects are like associative arrays - property: value) use this loop:

var y_array = { prop_1 : "value a", prop_2: "value_2", prop_3: 333 }
for (var key in y_array) {
   var value = y_array[key];
   // do what you want
   alert(key + ': ' + value);
}

Answer 3

if there is no value in your json Object like jsobObj = {}. Then you got the indexOf prototype function in side the empty object in IE < 9. (with value like function(){...} I bet) is shown too.

Your can check a condition in side your for Loop. and skip that indexOf.

if(key =='indexOf'){continue;}

E.g :

var jsonObj = { key_1 : "value a", key_2: "value_2", key_3: 333 }
for (var key in y_array) {
if(key == 'indexOf'){continue;}           // check if the array contain indexOf 
   var value = y_array[key];
   // do what you want
   alert(key + ': ' + value);
}