Topic: Javascript - string as variable name?

Hey guys.
Having a little trouble finding the answer to this one...

I have a series of form elements with id's, which, when clicked, I want to trigger another event...
I have a set of variables, each container an array of data.

The variable names are the same as the id's of the form elements.
I want to pass the id of the clicked element, as the variable name of the data array that I need to send....

in PHP I would do this like ${'string'} to access the variable $string

I've found pages telling to do something like window['string']...but that doesn't seem to do....well, anything in my case.

I am getting the correct string from the element id.... (let's say... 'foo'...) how do I tell my script I want it to use the contents of the variable foo?

say you have an object with id string like this

Obj.stringid

it's the same as

Obj['stringId']

Is that what you mean?

window[variableName] works for variables declared in the global namespace ( the window object ): in other words, for variables declared outside of a function or inside a function but without the var keyword.

Honestly I don't see exactly what you're trying to do but this should help.

Ok, well, removing the 'var' accomplished what I need for the moment.
I have no idea what, if any, the implications of doing so are...

For reference, I am using a javascript charting library (highcharts), and want to allow the user to select series to add/remove from the chart using a row of check boxes.
The variable name containing the data for each series, the id of the series once added to the chart, and the id of the check box are all the same.

So I wanted to be able to use the id of the check box to tell the script which dataset to add or remove...

A dummy example can be found here: http://jsfiddle.net/8tjuU/3/


thanks

if you made an array with the ids as keys you could call them like this

var objs=[]

objs["set1"]=set1
objs["set2"]=set2
objs["set3"]=set3



chart.addSeries(objs[this.id])

(this is the clicked checkbox)

I tested it and it seemed to work

var chart, id='';
var objs=[]
set1 = {name:'Set 1',data:[1,2,5,8,9,6,3,4,7,8],color:'#c66',id:'set1'};
set2 = {name:'Set 2',data:[5,8,9,3,1,4,7,8,9,6],color:'#6c6',id:'set2'};
set3 = {name:'Set 3',data:[8,5,7,4,2,3,6,9,4,1],color:'#666',id:'set3'};


objs[set1.id]=set1
objs[set2.id]=set2
objs[set3.id]=set3

//---------------------------------------
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    series: [set1]
});

//---------------------------------------

$("#controls input").each(function(){
    $(this).click(function(){
        var sID = $(this).attr('id');
        if($(this).attr('checked') == true){
            chart.addSeries(objs[$(this).attr('id')]); //don't know how to make this reference the variable above...?
        }
        else{
            chart.get($(this).attr('id')).remove();
        }
    });

Personally I'd put the data sets either as a TABLE element in the markup, for accessibility reasons, or in private variables to prevent messing up with them.

racerX:

var objs=[]
set1 = {name:'Set 1',data:[1,2,5,8,9,6,3,4,7,8],color:'#c66',id:'set1'};
/* ... */
objs[set1.id]=set1

That's one convoluted way of doing:

var objs={};
objs.set1 = {name:'Set 1',data:[1,2,5,8,9,6,3,4,7,8],color:'#c66'};

or a more direct object declaration like the one in the first jsfiddle link.

Arrays are objects, right?

Right. I was more talking about objs[foo.bar]=baz; vs objs.foo=baz;

I have to admit to a lot of what you guys say being lost on me

This is how I went about it:

var dataSets = {
  set1: {name:'Set 1',data:[1,2,5,8,9,6,3,4,7,8],color:'#c66',id:'set1'},
  set2: {name:'Set 2',data:[5,8,9,3,1,4,7,8,9,6],color:'#6c6',id:'set2'},
  set3: {name:'Set 3',data:[8,5,7,4,2,3,6,9,4,1],color:'#666',id:'set3'}
}

which works beautifully for me here. is there a downfall to this syntax compared to what you guys have presented?

As far as the table idea - I really don't want to get into that in this context.
The page is a metrics dashboard on a local intranet. The space is very precisely allocated, and the sole purpose of it is to display the data graphically.
There are data tables where appropriate, and the data is available in a variety of formats in a variety of places.

If anyone has an issue viewing it, then we need to correct their setup...

thanks again for the tips

No problem with this syntax nor with being pragmatic about addressing your (limited) audience first and foremost.

Ok, cool. Thanks

Now...another question -

is there an javascript equivalent of php's print_r or var_dump?
It's very frustrating trying to check whether I am getting the correct array contents with some of this stuff...

I'm feeling out how to go about selecting the right things, and I want to be able to just spit the array out on the page for verification.

Everything I've found online on the subject is more complex than I want to deal with

thanks

if you've got a debugging tool in your browser, console.log( anyVariable ); should output just what you want.

I'm not familiar with the debugging tool of other browsers, but in Opera DragonFly ( press Ctrl+Shift+I to open it ), in the Scripts, there is a command line and an Inspection window where you can type functions and variable names and inspect them and their properties in the Inspection window.