We help IT Professionals succeed at work.

how to fix javascript array list order problem in IE9?

Tim
Tim asked
on
I need JavaScript to display array.
var arr = new Array();

arr["7"] = "fruit";
arr["1"] = "vegetable";
arr["2"] = "food";

var s = "";
for (var key in arr) {
    s = key + ": " + arr[key];
    document.write (s);
}

In IE8 or early it shows
7: fruit    1:vegetable   2:food

In IE9 it shows
1:vegetable   2:food   7: fruit


I need IE9 show same result like IE8.

How I can do it?

Thanks

I found like http://msdn.microsoft.com/en-us/library/gg622937(v=vs.85).aspx
But I can't find a way to do it.
Comment
Watch Question

IT Expert
Top Expert 2009
Commented:
Basically you created a sparse array in IE9 and a pseudo associate array in the others.

If you need numbers in the index part but do not want the sort order to be affected, you need to add a non-numeric character in front.


arr = [];
arr["p7"] = "fruit";
arr["p1"] = "vegetable";
arr["p2"] = "food";

var s = "";
for (var key in arr) {
    s = key.replace('p','') + ": " + arr[key];
    document.write (s);
}


http://jsfiddle.net/mplungjan/3eWYM/

Commented:
In past experience I have found this:

for (var key in arr)

to not be cross-browser compliant

try changing to:

for(key=1;key<arr.length;key++)
s = key + ": " + arr[key];

Also, I dont have anything specific in mind, but this is a little wonky to me:

arr["7"] = "fruit";

The array index is a numeric type and shouldn't need quotes:

arr[7] = "fruit";

I don't see how they hurt anything as JavaScript will figure it out and convert it, but little things like this often come back to bite me in ways I didn't expect.

Commented:
@mplungjan

Interesting answer. Inspired me to want to learn something new today. Too tired though so will learn 1/2 something new today and maybe rest tommorrow.

Commented:
Worth adding an interesting point on the matter... or maybe just interesting to me:

http://andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/

Old but lets me consider both the current issue and the larger use of for(i in object) and why I've had problems in the past.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
You do not want to loop numerically over sparse arrays
Imagine
A["3"]="aaa";
A["100000"] = "bbb";

/working on something better but this works:

arr["7 "] = "fruit";
arr["1 "] = "vegetable";
arr["2 "] = "food";

//slightly better:

var arr = new ordered();

arr.add( "7", "fruit" );
arr.add( "1", "vegetable" );
arr.add( "2", "food" );

var s = "";
for (var entry in arr.element) {
    s = arr.element[entry].key + ": " + arr.element[entry].val;
    document.write (s);
}

function ordered() {
  this.element = new Array();
  this.add = function( key, val ) {
    this.element.push( { key:key, val:val } );
  };
}
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Proculopsis: Your space seems to be like my "p" - I still prefer my "p"

I updated my fiddle:

http://jsfiddle.net/mplungjan/3eWYM/

How does this behave in IE9?
It works as expected in Fx and the arr=[] works as IE9 in Fx too - e.g sorts the array!!!

arr = {};

arr["7"] = "fruit";
arr["1"] = "vegetable";
arr["2"] = "food";

I STILL claim that you should NEVER use numbers where strings are expected!!!

That is also true for

<div id="1"></div>

<input id="1" />

and so on


//another method...

var arr = new Array;

arr[ ["7",null] ] = "fruit";
arr[ ["1",null] ] = "vegetable";
arr[ ["2",null] ] = "food";

var s = "";
for (var key in arr) {
    s = key[0] + ": " + arr[key];
    document.write (s);
}

//least code change...

var arr = new Array;

arr[ ["7",] ] = "fruit";
arr[ ["1",] ] = "vegetable";
arr[ ["2",] ] = "food";

var s = "";
for (var key in arr) {
    s = key[0] + ": " + arr[key];
    document.write (s);
}

Commented:
I guess my take out of the whole thing was that this should be avoided, which was my initial assertion lacking a strong basis for why:

arr["7"] = "fruit";

If you want to use an array and numbers then dont use "" and dont use for(x in y) loop

If you want to use "" then you are creating a property, in essense a key/value pair then mplungian has a point, use letters/names otherwise you are confusing JavaScript and yourself.

If you use "p" then you can use the for(x in y) loop, if you use numbers only then you cant with predictable results use the for(x in y) method.

Do some careful  reading and testing/debugging and you will see his point more clearly.

Here's another article that explains this rather nicely:

http://blog.xkoder.com/2008/07/10/javascript-associative-arrays-demystified/

You have to read down to "Associative Arrays or something else".

So:
var arr = new Array();
arr[1] = 'fruit';
for(key=1;key<arr.length;key++)
s = key + ": " + arr[key];

Or:
var arr = new Array();
arr["name"] = 'fruit';
for(var key in arr)

Always Bad Idea:
var arr = new Array();
arr['1'] = 'fruit'; //this has no distinction from this arr[1] = 'fruit' except JS has to convert the string
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Or us arr= {} een you neef for  in
TimSenior PHP Developer

Author

Commented:
This is just part of my code. The key and the value come from database, it order by other column.
Ok, I will add some javascript code to make this work in IE8 and IE9.
Thanks all.

Okay, the following will minimise the changes to existing code:

var arr = new Array;

arr[ ["7",] ] = "fruit";
arr[ ["1",] ] = "vegetable";
arr[ ["2",] ] = "food";

var s = "";
for (var key in arr) {
    s = key[0] + ": " + arr[key];
    document.write (s);
}

Open in new window


If you can select the column used in the orderby then you could try something like this:

arr[ >>>orderby value<<< ] = { id: "7", lunch: "fruit" };

Michel PlungjanIT Expert
Top Expert 2009

Commented:
Sorry, I do not agree with that suggestion.
Trailing commas are a very bad idea! Using object notation {} is the CORRECT way to populate sparse "arrays" in preparation for "for... in" loops

@mplungjan: If you can't make a positive contribution the remain quiet - thank you.

//here's another possibility:

var arr = new Array;

arr.push( { id: "7", val: "fruit" } );
arr.push( { id: "1", val: "vegetable" } );
arr.push( { id: "2", val: "food" } );

var s = "";
for (var key in arr) {
    s = arr[key].id + ": " + arr[key].val;
    document.write (s);
}

Michel PlungjanIT Expert
Top Expert 2009

Commented:
Just because I do not agree with you does not mean I am negative. I do however think your post may confuse the asker more than help. Not that I am not enjoying them, but we are getting into over complex constructs in my not so humble opinion.
TimSenior PHP Developer

Author

Commented:
Thanks all.
I learn alots from here.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Proculopsis: Just to avoid any misunderstanding - I was asking for YOUR help in one of my questions, but was maybe being clumsy about it.
It has since been solved elsewhere.