Better Way of Creating Many Arrays?

Question

I'm not even sure if this is bad practice or not and needs changing, but want to make sure. It doesn't seem to impact performance at all.

I have a plugin that has many options. The user can enter options in the following format:

speed: "in,out > in,out > in,out"

Each group of "in,out" settings applies to an HTML element being animated - separated by the ">". The above is setting the animation on/off speed for 3 different objects. Everything works perfectly across all browsers now, but I've had to create a ton of arrays to handle all of the settings. Basically there's an array that holds all of the speed_in settings (object1, object2, object3), speed_out, effect_in, etc...

Basically, I have a block of code that is nothing but creating arrays for these sets, like so:

var speed_in_set = [], speed_out_set = [], effect_in_set = [], effect_out_set = [] ....

The array names are based off of the original default setting names:

speed: ... effect: ...

My best guess to make this more efficient is to iterate over the defaults key names and append _on_set and _off_set to create a new array for each one, but have no idea how to do that and if I even need to worry about have too many arrays. Thanks!

Answer 1

JSON is an excellent technique for complex array structures, particularly for value/name pairs. Widely used and fast.

EDIT: example.

You can add more properties by adding more elements, instead of creating a new array. Do some searched on JSON on this site and you'll fine some interesting examples. I have one dataset called "data", but you can add others for other purposes, all in on JSON object. It's really like having a small database.

<script type='text/javascript'>
var myData = {"data":[
     {'speed_in_set':10,'speed_out_set':5,'effect_in_set':15,'effect_out_set':200.1},
     {'speed_in_set':15,'speed_out_set':5,'effect_in_set':15,'effect_out_set':200.1, 'color':'red'}
     ]
}    

alert(myData.data[0].speed_in_set)
alert(myData.data[1].speed_in_set) 
alert(myData.data[1].color)   
</script>