How can I access an array using an objects name value?

Question 1

What I am trying to do

I am trying to access several arrays by passing a parameter to a function that is basically controls a slideshow. The parameter I pass to the function is the nameof a <a href=#" name="rebounding" onclick="nextPlayer(this.name)"></a>. Here is one of the arrays I am trying to access. var reboundingImgs = ['tyson_chandler.png', 'dwight_howard.png', 'zach_randolph.png', 'omer_asik.png', 'nikola_vucevic.png', 'joakim_noah.png'];

The problem

When I pass the parameter to the function that changes the image and I use the [index]instead of getting the index in the array called reboundingImgs[]I get the letter in the string parameter. e.g. parameter + "Imgs"[index] would be "b" if index was 2 and the parameter I pass in is "rebounding". I need to access the arrays using the parameter I pass in to show the right image from the right array( I have several arrays containing images e.g. scoringImgs[], reboundingImgs[], assistsImgs[], etc)

Here is my code

function nextPlayer(typeStatStr) {
 var numImgs = 6;
 var img = document.getElementById("slideImage");
 var imageName = img.name.split("_"); 
 var index = imageName[1];
 if (index == numImgs -1) {
 return;
 } 
 else {
 index++;
 }
 img.src = "..\\nbaart\\" + typeStatStr + "Imgs"[index];
 img.name = "image_" + index;
}
function prevPlayer(typeStatStr) {
 var img = document.getElementById("slideImage");
 var imageName = img.name.split("_");
 var index = imageName[1];
 if (index == 0) {
 return;
 }
 else {
 index--;
 }
 img.src = "..\\nbaart\\" + typeStatStr + "Imgs"[index];
 img.name = "image_" + index;
}

Question 2

Wait a moment. Are those arrays in separate files ?!

Question 3

They are global. I load them in the <head> I do it like this so the browser can pre load them into memory.

Question 4

Make an object which has properties that you can access given the name of the arrays:

var imgs = {};
imgs.rebounding = ['tyson_chandler.png', 'dwight_howard.png', 
 'zach_randolph.png', 'omer_asik.png', 
 'nikola_vucevic.png', 'joakim_noah.png'];
alert(imgs["rebounding"][0]); // tyson_chandler.png

Question 5

Thanks for showing me this approach. It's more object-oriented right? Together with you and Juans answer my slideshow is working.

Question 6

I don't think object-oriented is the right word, it's more maintainable as you will end up using less code.

Question 7

Saves you writing specific stuff for each name. This method is much more object-oriented than Juan Mellado's however, attaching data to window that could easily be in its own variable is bad practice.

Question 8

Why don't pass the proper array as a parameter to the function?

nextPlayer(reboundingImgs);

And then just:

typeStatStr[index];

Anyway, if the arrays are some sort of global variables (window scope?) then you can do this:

window[typeStatStr + "Imgs"][index];

Question 9

I didn't think about sending the proper array (i am pretty new to programming). After I did that I figured out that I had to make 2 new functions though. The new functions find out which of the arrays to send to nextPlayer() and prevPlayer() respectively. I also tested your second suggestion window[typeStatStr + "Imgs"[index]; and it worked good, but since it only works with global variables I decided to not use it.

Question 10

String is just type character array so by doing: "Imgs"[index]; you are accessing the index-th element of the array of "Imgs". For instance "Imgs"[2] == 'g'.

If you want to access the index-th element of the array Imgs then you should do:

Imgs[index]; //Without the quotes

Question 11

This is indeed the problem. @JuanMellado's answer shows you you can get the array variable instead of the string. Although making an imgs object as Tyriar suggests is nicer IMO.

Question 12

Actually im trying to concatenate typeStatStr, which is a string, with another string "Imgs" so that it forms the name of an array and then access that array with [index].

Daniel Imms 50.6k19 gold badges157 silver badges170 bronze badges · Accepted Answer · 2013-03-02 14:05:33Z

3

Make an object which has properties that you can access given the name of the arrays:

var imgs = {};
imgs.rebounding = ['tyson_chandler.png', 'dwight_howard.png', 
 'zach_randolph.png', 'omer_asik.png', 
 'nikola_vucevic.png', 'joakim_noah.png'];
alert(imgs["rebounding"][0]); // tyson_chandler.png

Share

Improve this answer

answered Mar 2, 2013 at 14:05

Daniel Imms's user avatar

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

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

3 Comments

Lexus de Vinco

Lexus de Vinco Over a year ago

Thanks for showing me this approach. It's more object-oriented right? Together with you and Juans answer my slideshow is working.

2013年03月02日T15:45:35.643Z+00:00

Daniel Imms

Daniel Imms Over a year ago

I don't think object-oriented is the right word, it's more maintainable as you will end up using less code.

2013年03月02日T15:47:24.637Z+00:00

Daniel Imms

Daniel Imms Over a year ago

Saves you writing specific stuff for each name. This method is much more object-oriented than Juan Mellado's however, attaching data to window that could easily be in its own variable is bad practice.

2013年03月02日T15:55:38.527Z+00:00

CollectivesTM on Stack Overflow

How can I access an array using an objects name value?

What I am trying to do

The problem

Here is my code

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

What I am trying to do

The problem

Here is my code

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related