Javascript array indexed by string

Question

I have the below javascript function I want to optimise for my web app.

function DisplayToolTip(str) {
 switch (str) {
 case "a": 
 this.tooltip(xvalue,yvalue,text);
 break;
 case "b": 
 this.tooltip(xvalue,yvalue,text);
 break;
 case "c": 
 this.tooltip(xvalue,yvalue,text);
 break;
 default: break;
 }
}

The switch statement may change i.e. json may need to add in a case "d" but the function exists so dont know how to update the above.

Normally in c# I would use a dictionary, so key would be "a" and value would be an object with properties xvalue,yvalue,text or value would be a string "this.tooltip(xvalue,yvalue,text);". This way I could update the dictionary and the execution speed of 'DisplayToolTip' would be relatively the same no matter how many elements.

How do you create an array of objects indexed or quickly found using a string value in javascript?

• Qantas 94 Heavy: Sorry, but I'm not sure what the question is asking. Could you clarify please?
• Peter Rasmussen: where does text xvalue yvalue and text come from?
• Qantas 94 Heavy: Note that in Javascript the default case is not necessary.
• Dere_2929: the current function is created with the actual values so this.tooltip(1,2,"tooltip"); but was thinking of moving to objects client side possibly

Answer 1

Objects in javascript are like dictionaries.

var dictionary = {
 a : ["xvalue","yvalue","text1"],
 b : ["xvalue","yvalue","text2"]
}
console.log(dictionary["b"][2]); // will give you text2.

Demo

EDIT: Updated answer to contain arrays (as that is what the question is).

• Delan Azabani: If keys are dynamically being inserted from external sources, adding a prefix may be helpful to avoid conflicts with members defined in all objects such as toString and hasOwnProperty.

Answer 2

You can use the switch statement itself, with fall-through:

switch (str) {
 case "a": case "b": case "c": 
 this.tooltip(xvalue,yvalue,text);
 break;
 default: break;
}

(But, as Qantas commented, the default case isn't necessary here.)

Or, it the browser supports it, you can use the indexOf method of arrays:

if (["a", "b", "c"].indexOf(str)) ...

• Dere_2929: The function already exists and because of user selection need to add in case "b" through JSON as dont want to redraw whole page.
• MaxArt: @Dere_2929 Ok, where's this JSON then? Is there a variable or something?
• Dere_2929: JSON runs after user clicks button, think peter/poelinca/ruslan implementation will work with json result to update dictionary

Answer 3

I would do something like this:

var tooltipSettings={
 a: {xvalue: 1, yvalue: 1, text: 'string a'},
 b: {xvalue: 2, yvalue: 2, text: 'string b'},
 c: {xvalue: 3, yvalue: 3, text: 'string c'}
};
function DisplayToolTip(str) {
 if(tooltipSettings[str])
 {
 var settings=tooltipSettings[str];
 this.tooltip(settings.xvalue, settings.yvalue, settings.text);
 }
}

• Dere_2929: thanks for this as may use for object implementation

Answer 4

You could use a dictionary, witch is basically an plain object. Javascript allows you to access an object property by string like you would access an array property like this:

var obj = {
 test: 'text',
 b: 4
}
console.log(obj['test'], obj.test);
console.log(obj['b'], obj.b);

So your code would look like this:

var pairs = {
 'a': {
 xvalue: 1,
 yvalue: 1,
 text: '1111'
 },
 'b': {
 xvalue: 2,
 yvalue: 2,
 text: '2222'
 }
};
function DisplayToolTip(str) {
 var prop = pairs[str];
 if (typeof prop !== 'undefined')
 return this.tooltip(prop.xvalue, prop.yvalue, prop.text);
 throw 'undefined prop ' + str;
}

• Dere_2929: thanks for this as may use for object implementation