JavaScript variable variables

Question

Say I have object:

function obj()
{
  this.prop1;
  this.prop2;
  this.prop3;
}

and an array of obj's

  objects = [new obj(),new obj(),new obj()];

I want to easily iterate through each using jquery where the class name is equivalent to the property of the object.

var itemsIWantToBind = ["prop1","prop2","prop3"];
for(j=0;j<itemsIWantToBind.length;j++)
{
    $("."+itemsIWantToBind[j]).unbind().blur(function(){
        var id = $(this).siblings(".objID").html();
        if(id >= 0)
        {
            objects[id].itemsIWantToBind[j] = $(this).text());
        }
    });

}

My issue is I want to be able use a variable variable to iterate through the items for this

objects[id].itemsIWantToBind[j] = $(this).text());  
            ^^^^^^^^^^^^^^^^^

the indicated part does not correctly bind the value of the array item as it is trying to bind the property name of it instead.

In php it would be the same as:

foreach($itemsIwantToBind as $item)
{
   $objects[$id]->$item = "Something";
}

Is there a simple way to do this in JavaScript?

@MarcB: That would get him close, but j will be invalid by the time the event occurs. — T.J. Crowder
– T.J. Crowder, Commented Feb 23, 2015 at 19:13
Note: The answer is correctly answered by @T.J.Crowder but the issue was due to itemsIwantToBind and j being out of scope for the blur method, so the code above won't work even with the proper notation :) — Jeff
– Jeff, Commented Feb 23, 2015 at 19:22

T.J. Crowder · Accepted Answer · 2015-02-23 19:11:46Z

3

Use brackets notation:

var o = new obj();
o.prop1 = "I'm the value";
var s = "prop1";
console.log(o[s]); // "I'm the value"

I think this is how this relates to your code:

["prop1","prop2","prop3"].forEach(function(prop) {  // **A**
    $("."+prop).unbind().blur(function(){
        var id = $(this).siblings(".objID").html();
        if(id >= 0)
        {
            objects[id][prop] = $(this).text());    // **B**
        }
    });
});

(B) is the place where we actually use the name, but note the (A) change to so that we get a value that won't change. You can't just use

// Wrong unless we also change the loop
objects[id][itemsIWantToBind[j]] = $(this).text());

because j will be be beyond the end of the array when the event occurs.

forEach is an ES5 feature that can readily be shimmed for old browsers. Or you can use jQuery's $.each instead:

$.each(["prop1","prop2","prop3"], function(i, prop) {  // **A**
    $("."+prop).unbind().blur(function(){
        var id = $(this).siblings(".objID").html();
        if(id >= 0)
        {
            objects[id][prop] = $(this).text());       // **B**
        }
    });
});

edited Feb 23, 2015 at 19:11

answered Feb 23, 2015 at 19:03

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

4 Comments

Jeff Over a year ago

Ah, I had tried that, but my issue was with variable scope(this is correct, I'll accept when I can). My array, itemsIWantToBind , was out of scope for the .blur() method I called. Thanks for the help!

T.J. Crowder Over a year ago

@Jeff: That's strange, it isn't in the question -- but then, I'm guessing the question is a fairly condensed version of the actual code. :-)

Jeff Over a year ago

@t-j-crowder Yeah, I realized this after. I can't call itemsIWantToBind OR j from within the blur method but you correctly answered the question I posted; just my error was else where and realized it after I asked this! Thanks again for your help :)

T.J. Crowder Over a year ago

@Jeff: LOL -- "new" in 2009, when the 5th edition spec was finalized. :-) All sorts of nifty additions to arrays -- map, some, reduce...

Collectives™ on Stack Overflow

JavaScript variable variables

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related