Can I declare a variable using the value of an element's data attribute?

Question

I'm building up an object where the key will be a string, and the value will be an array of values.

Here's what I'm looking at building...

myObject = { BAR = ['values', 'values'], BAR_2 = ['values', 'values'] }

So I'm getting stuck on making my 'BAR' arrays. I want to use a data-attribute that is being passed into the function.

So let's assume this in the HTML:

<a href="#" data-foo="BAR">x</a>

I want to do this:

$(this).data('foo') = [];

so I have a new array called BAR[] which I can then push values into.

Answer 1

I ended up using the window object to reference the data-attributes that way, rather than eval. I think the way we handle our event binding was making the other solutions error out.

<a href="#" data-foo="BAR">x</a>

// set key to the  BAR[] array
   var key = window[ $this.data( 'foo' ) ];

// push value into BAR[]
   key.push( $this.data( 'values' ) );

// push the BAR['values'] array into the myObject object
   myObject[$this.data( 'foo' )] = key;

OUTPUT:

myObject = { BAR = ['values', 'values'], BAR_2 = ['values', 'values'] }

Answer 2

You can only do this as a property of a larger object or array.

So if

var store = {};

then you can

store[$(this).data('foo')] = [];

if you want, you can also use the this object to store your var, though it doesn't make sense to do it like this in your case, because I'm guessing your code is inside some jquery event handler.

this[$(this).data('foo')] = [];

Answer 3

Why not use extend()? Seems to be exaclty what you need.

HTML

<a href="#" data-foo="BAR_1">x</a>
<a href="#" data-foo="BAR_2">x</a>
<a href="#" data-foo="BAR_3">x</a>

JS

var my_object = {};
var $link = $('a');

$.each($link, function() {
    var $this = $(this);
    var key = $this.data('foo');
    $.extend(my_object, my_object[key] = []);
});

console.log(my_object);

jsfiddle example: http://jsfiddle.net/YK6bH/ (check the browser console.log)

docs: http://api.jquery.com/jquery.extend/

Answer 4

It's hard to tell what your expected output and behavior is, so here's my stab. http://jsfiddle.net/y6a8H/

bar: <input type="text" data-foo="bar" /><br />
bar: <input type="text" data-foo="bar" /><br />
bar_2: <input type="text" data-foo="bar_2" /><br />
bar_2: <input type="text" data-foo="bar_2" /><br />
bar_2: <input type="text" data-foo="bar_2" /><br />
bar_3: <input type="text" data-foo="bar_3" />

$('[data-foo]').on('blur',function(){
    var vals = {};
    $('[data-foo]').each(function(i,e) {
        var data_foo = $(e).data('foo');
        vals[data_foo] = vals[data_foo] || [];
        vals[data_foo].push($(e).val());
    });
    console.log(vals);
})

When an input changes, I build the object and log it. So this input will display

{"bar":["a","b"],"bar_2":["c","d","e"],"bar_3":["f"]}

Answer 5

You could also use the javascript function eval(). for example:

x = 'hello';
eval('var '+x+'="world"');
//the variable hello is now equal to the string "world"