Dots in index names in Internet Explorer 7 does not work

Question

For example properties['stem.secid'] is interpreted by Internet Explorer 7 as properties.stem.secid and is thus not working.

Is there a solution or workaround to this problem?

Answer 1

I think you might be mistaken here. At the very least, this isn't how IE9 works:

>> var x = { foo : { bar : 'hello' } }; 
>> x.foo.bar 
"hello" 
>> x['foo.bar'] 
undefined

Or more explicitly:

>> var x = {
    foo : {
        bar : 'hello'
    },
    'foo.bar' : 'goodbye'
}; 

>> x['foo.bar'] 
"goodbye"

Answer 2

This isn't true. Dots are perfectly valid in property names (indeed any string may be used as a property name) and are handled correctly by IE 7. The following works correctly in all browsers:

var o = {};
o['stem.secid'] = "foo";
alert(o.stem); // undefined
alert(o['stem.secid']); // foo

Answer 3

This is by design. Why doesn't that work for what you want?

Javascript allows properties to be identified by bracket-string notation or by dotted notation as you've shown. This allows for the following to be equivalent:

my.obj.stem.secid = value
my['obj']['stem']['secid'] = value

But that allows us to programmatically select specific elements by specifying a key like thus:

var key1 = 'obj';
var key2 = 'stem';
var key3 = 'secid';
my[key1][key2][key3] = value
//or alternately just in parts:
my[key1].stem[key3] = value

but note that that would not be the same as if we did this

var key1 = 'obj';
var key2 = 'stem';
var key3 = 'secid';
my.key1.key2.key3 = value

And that is why you would use bracketed strings as segment identifiers.