Accessing dynamic property names in Jquery/Javascript

Question

In a plugin I'm writing, the dev can specify options, which I'm storing and referencing like so:

(function( $, window) {
    $.widget("mobile.plug", $.mobile.widget, {
        options: {
            menuWidth: '25%',
            middleWidth: '25%',
            mainWidth: '25%'
            },
         some: function(){
            var self = this,
                o = self.options;

            console.log( o.menuWidth );
            }
     })
}) (jQuery,this);

My Question:
Say I want to loop through all three elements (main, menu, middle) and get the respective option value, how would I construct o.[elem]Width dynamically, if at all possible?

This doesn't work (ERROR: missing name after . operator):

// this selects panels with jqmData(panel="mid|menu|main")
var elems = $('selector');

for (var i = 0; i<elems.length; i++){
   var el = elems.eq(i);
   console.log( o.[el.jqmData("panel")]Width );
   }

@Gareth: You are right, the question is misleading. I thought I need dot-notation. I actually did not know, I could also do it with brackets []. What would be a better title? — frequent
– frequent, Commented Jun 15, 2012 at 13:04

Ahmad Mageed · Accepted Answer · 2012-06-15 12:58:39Z

4

You should be able to concatenate "Width" to the "panel" result:

o[el.jqmData("panel") + "Width"]

E.g., if el.jqmData("panel") is "menu" you would get o["menuWidth"].

edited Jun 15, 2012 at 12:58

answered Jun 15, 2012 at 12:53

Ahmad Mageed

96.9k20 gold badges170 silver badges177 bronze badges

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

Comments

user1106925 · Accepted Answer · 2012-06-15 12:55:52Z

3

You're getting the error because you're trying to use both forms of the object member operator.

The two forms are...

obj.propertyName dot notation
obj["propertyName"] bracket notation

You have .[...] (using both. The dot expects a name to come after it)

You need [...] (no preceding dot)

Then also, you want to do string concatenation to add "Width"

o[el.jqmData("panel") + "Width"]

answered Jun 15, 2012 at 12:55

user1106925

Comments

T.J. Crowder · Accepted Answer · 2012-06-15 12:55:59Z

3

What you're looking for is bracketed notation with strings:

for (var i = 0; i<elems.length; i++){
   var el = elems.eq(i);
   console.log( o[el.jqmData("panel") + "Width"] );
   }

...assuming that el.jqmData("panel") returns "mid", "menu", etc.

In JavaScript, you can refer to a property with either dotted notation and a literal (obj.foo), or bracketed notation and a string (obj["foo"]). In the latter case, it doesn't have to be a literal string, it can be the result of an expression.

answered Jun 15, 2012 at 12:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Collectives™ on Stack Overflow

Accessing dynamic property names in Jquery/Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related