Accessing a Dynamically Named array in jQuery/javascript

Question

I wish to name an array according to the table row containing the button that was clicked.

I get the table row thus:

var rowNum = $(this).parent().parent().index();

Now, I wish to name the array and access it.

var arrayName = 'arrTR' + rowNum;
window[arrayName] = new Array();
window[arrayName]["First"] = "Bob";
window[arrayName]["Last"] = "Roberts";
window[arrayName]["email"] = "[email protected]";

//The array should be accessible as arrTR__
alert(arrTR1["Last"]);

The alert does not work, so I am doing something wrong.

How should I refactor the code to allow me to update and access the array?

jsFiddle

Don't contaminate the window object. Use jQuery's data method and store it in the $.cache if you want a global variable. — Johan
– Johan, Commented Sep 13, 2013 at 21:48
The fiddle you've provided works except that the fourth alert will only work if you've clicked the first row's button at some point to create the arrTR1 variable. But why are you creating global variables like that? If you explain what you're trying to achieve somebody will suggest a better way. As an aside: don't use arrays with non-numeric properties, you should use objects: window[arrayName] = {}. — nnnnnn
– nnnnnn, Commented Sep 13, 2013 at 22:13
@Johan If not asking too much, would you mind updating your answer to show what you mean by using jQuery's data method and storing in the $.cache? — cssyphus
– cssyphus, Commented Sep 14, 2013 at 3:18
@gibberish When you're using the data method, jQuery uses the $.cache internally. So all you need to know is how to use the data method. I've updated my answer — Johan
– Johan, Commented Sep 14, 2013 at 17:59

Michael Geary · Accepted Answer · 2013-09-14 20:19:33Z

What you're doing with the dynamically named variables is essentially creating an array of those variables (one for each rowNum), but giving each of those array elements its own individual named variable.

There is a much better way to do this. Instead of generating a series of dynamically named variables, make a single array or an object. Then add an element or property for each of the dynamically named variables you were going to generate.

Your test code could look like this:

var arrTR = [];

var rowNum = 1;

arrTR[rowNum] = {
    First: 'Bob',
    Last: 'Roberts',
    email: '[email protected]'
};

alert( arrTR[1].Last );

Alternatively, you can do something with $.data as mentioned in Johan's answer. But if you do use plain JavaScript code, use a single array as described here instead of multiple dynamically named variables.

There are several reasons to do it this way. It's cleaner and easier to understand the code, it may be faster when there are large numbers of entries, and you don't have to pollute the global namespace at all. You can define the var arrTR = []; in any scope that's visible to the other code that uses it.

Arrays and objects are made for keeping track of lists of things, so use them.

Milad Hosseinpanahi · Accepted Answer · 2013-09-13 22:10:04Z

1

There is nothing wrong with your code, and the only place it has error is the alert since it is not defined on the first click button

see this fiddle with a little update

if(rowNum === 1)
    alert(arrTR1["Last"]);
else if(rowNum === 2)
    alert(arrTR2["Last"]);

fiddle

answered Sep 13, 2013 at 22:10

Milad Hosseinpanahi

1,50512 silver badges20 bronze badges

Comments

Johan · Accepted Answer · 2013-09-14 17:58:22Z

How about something like this?

$('.getinfo').click(function() {

    var result = $('table tr:gt(0)').map(function(k, v){
            return { 
                firstName: $(v).find('.fname').val(),
                lastName: $(v).find('.lname').val(),
                email: $(v).find('.email').val(),
            }
        }).get();

    //update to show how you use the jQuery cache:

    //1. set the value (using the body tag in this example):
    $('body').data({ result: result });

    //2. fetch it somewhere else:
    var res = $('body').data('result');

});

Not sure how you want to handle the first row. I skip in in this case. You can access each row by result[index].

As you might have noticed, this saves all rows for each click. If you want to use the clicked row only, use the this pointer.

http://jsfiddle.net/nwW4h/4/

Collectives™ on Stack Overflow

Accessing a Dynamically Named array in jQuery/javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related