design patterns in javascript?

[Navodit]

Hi

I have a very typical problem which I believe might be more easily solvable
if it were designed better:

I have 3 dropdowns: dropdown1 (State), dropdown2 (County), dropdown3 (crop).
So the idea is that each state has different counties and different
permutations of state and counties lead to different sets of crops. I have a
total of 63 combinations of sets of crops available right now. Each of these
combinations can consist of one or more of the following: (crop1, crop2,
crop3, crop4, crop5, crop6, crop7). Right now each of these combinations is
hardcoded.

I would like to improve the design of the code if it is possible. The way I
see this problem is that each of those 63 combinations is just adding
different kinds of condiments (crops in our case!) depending on the state
and county selected by the user. This looks something like the decorator
pattern where we can decorate(add accessories) objects at runtime.
However I am not entirely sure if first this is a good example of decorator
pattern and secondly if it is possible to implement something like this in
Javascript. Any thoughts/ideas/suggestions would be welcome...

Navodit

p.s.: Some sample code to give you an idea of what I am talking about-

if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insur ance.county.sel ectedIndex == 1 ||
document.Insura nce.county.sele ctedIndex == 2 ||
document.Insura nce.county.sele ctedIndex == 100 ||
document.Insura nce.county.sele ctedIndex == 101))
{
document.Insura nce.Commodity.l ength = 5;
document.Insura nce.Commodity[1].value = "4116";
document.Insura nce.Commodity[1].text = "Corn";

document.Insura nce.Commodity[2].value = "81997";
document.Insura nce.Commodity[2].text = "Soybeans";

document.Insura nce.Commodity[3].value = "11997";
document.Insura nce.Commodity[3].text = "Wheat";

document.Insura nce.Commodity[4].value = "51997";
document.Insura nce.Commodity[4].text = "Grain sorghum";
}
else if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insur ance.county.sel ectedIndex == 4 ||
document.Insura nce.county.sele ctedIndex == 6 ||
document.Insura nce.county.sele ctedIndex == 94 ||
document.Insura nce.county.sele ctedIndex == 102))
{
document.Insura nce.Commodity.l ength = 4;
document.Insura nce.Commodity[1].value = "4116";
document.Insura nce.Commodity[1].text = "Corn";

document.Insura nce.Commodity[2].value = "81997";
document.Insura nce.Commodity[2].text = "Soybeans";

document.Insura nce.Commodity[3].value = "11997";
document.Insura nce.Commodity[3].text = "Wheat";
}
else if .....
{

}

There are in total 63 different else if combinations... .

[brunascle]

On Apr 23, 11:46 am, "Navodit" <kaush...@uiuc. eduwrote:

Hi

I have a very typical problem which I believe might be more easily solvable
if it were designed better:

I have 3 dropdowns: dropdown1 (State), dropdown2 (County), dropdown3 (crop).
So the idea is that each state has different counties and different
permutations of state and counties lead to different sets of crops. I have a
total of 63 combinations of sets of crops available right now. Each of these
combinations can consist of one or more of the following: (crop1, crop2,
crop3, crop4, crop5, crop6, crop7). Right now each of these combinations is
hardcoded.

I would like to improve the design of the code if it is possible. The way I
see this problem is that each of those 63 combinations is just adding
different kinds of condiments (crops in our case!) depending on the state
and county selected by the user. This looks something like the decorator
pattern where we can decorate(add accessories) objects at runtime.
However I am not entirely sure if first this is a good example of decorator
pattern and secondly if it is possible to implement something like this in
Javascript. Any thoughts/ideas/suggestions would be welcome...

Navodit

p.s.: Some sample code to give you an idea of what I am talking about-

if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insur ance.county.sel ectedIndex == 1 ||
document.Insura nce.county.sele ctedIndex == 2 ||
document.Insura nce.county.sele ctedIndex == 100 ||
document.Insura nce.county.sele ctedIndex == 101))
{
document.Insura nce.Commodity.l ength = 5;
document.Insura nce.Commodity[1].value = "4116";
document.Insura nce.Commodity[1].text = "Corn";

document.Insura nce.Commodity[2].value = "81997";
document.Insura nce.Commodity[2].text = "Soybeans";

document.Insura nce.Commodity[3].value = "11997";
document.Insura nce.Commodity[3].text = "Wheat";

document.Insura nce.Commodity[4].value = "51997";
document.Insura nce.Commodity[4].text = "Grain sorghum";}

else if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insur ance.county.sel ectedIndex == 4 ||
document.Insura nce.county.sele ctedIndex == 6 ||
document.Insura nce.county.sele ctedIndex == 94 ||
document.Insura nce.county.sele ctedIndex == 102))
{
document.Insura nce.Commodity.l ength = 4;
document.Insura nce.Commodity[1].value = "4116";
document.Insura nce.Commodity[1].text = "Corn";

document.Insura nce.Commodity[2].value = "81997";
document.Insura nce.Commodity[2].text = "Soybeans";

document.Insura nce.Commodity[3].value = "11997";
document.Insura nce.Commodity[3].text = "Wheat";}

else if .....
{

}

There are in total 63 different else if combinations... .

you might want to look into object oriented javascript. just do a
search for it and you'll find a wealth of info. you'll still need a
large block of javascript to define all your states, countries, and
crops, but setting it up in an object-oriented way will better express
what the data actually means, and it will be easier to extend later
on.

if you're familar with object oriented programming, it shouldnt be too
difficult (though in javascript it can be a little weird). if not, you
might want to read up on the concepts of OOP first, before doing it in
javascript.

[Bart Van der Donck]

Navodit wrote:

I have 3 dropdowns: dropdown1 (State), dropdown2 (County), dropdown3 (crop).
So the idea is that each state has different counties and different
permutations of state and counties lead to different sets of crops. I have a
total of 63 combinations of sets of crops available right now. Each of these
combinations can consist of one or more of the following: (crop1, crop2,
crop3, crop4, crop5, crop6, crop7). Right now each of these combinations is
hardcoded.

I would like to improve the design of the code if it is possible. The way I
see this problem is that each of those 63 combinations is just adding
different kinds of condiments (crops in our case!) depending on the state
and county selected by the user. This looks something like the decorator
pattern where we can decorate(add accessories) objects at runtime.
However I am not entirely sure if first this is a good example of decorator
pattern and secondly if it is possible to implement something like this in
Javascript. Any thoughts/ideas/suggestions would be welcome...

if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insur ance.county.sel ectedIndex == 1 ||
document.Insura nce.county.sele ctedIndex == 2 ||
document.Insura nce.county.sele ctedIndex == 100 ||
document.Insura nce.county.sele ctedIndex == 101))
{
document.Insura nce.Commodity.l ength = 5;
document.Insura nce.Commodity[1].value = "4116";
document.Insura nce.Commodity[1].text = "Corn";

document.Insura nce.Commodity[2].value = "81997";
document.Insura nce.Commodity[2].text = "Soybeans";

document.Insura nce.Commodity[3].value = "11997";
document.Insura nce.Commodity[3].text = "Wheat";

document.Insura nce.Commodity[4].value = "51997";
document.Insura nce.Commodity[4].text = "Grain sorghum";}

else if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insur ance.county.sel ectedIndex == 4 ||
document.Insura nce.county.sele ctedIndex == 6 ||
document.Insura nce.county.sele ctedIndex == 94 ||
document.Insura nce.county.sele ctedIndex == 102))
{
document.Insura nce.Commodity.l ength = 4;
document.Insura nce.Commodity[1].value = "4116";
document.Insura nce.Commodity[1].text = "Corn";

document.Insura nce.Commodity[2].value = "81997";
document.Insura nce.Commodity[2].text = "Soybeans";

document.Insura nce.Commodity[3].value = "11997";
document.Insura nce.Commodity[3].text = "Wheat";}

else if .....

Two core thoughts in this kind of complex data architectures:
- never repeat the same data twice
- separate data initialization from application

--------------------------------------------------------------

/* DATA INITIALIZATION */

// crops in form "crop[ID] = name"
var crop = new Object()
crop['10'] = 'corn'
crop['28'] = 'lettuce'
crop['29'] = 'soyabeans'
crop['33'] = 'tomatoes'
crop['35'] = 'wheat'

// counties in form "county[ID] = [countyname, [crops in it]]"
var county = new Object()
county['1'] = ['North Florida', [10,29] ]
county['2'] = ['Central Florida', [10,28,29,35] ]
county['7'] = ['South Florida', [] ]
county['8'] = ['East Texas', [29,33] ]
county['9'] = ['West Texas', [28,33,35]]

// states in form "state[stateID] = [statename, [counties in it]]"
var state = new Object()
state['24'] = ['Florida', [1,2,7]]
state['31'] = ['Texas', [8,9]]

/* DISPLAY */

document.write( '<form>')
document.write( '<select name="stateID" size="1"
onChange="f1(th is.value)">')
document.write( '<option value="">-</option>')
for (var i in state)
document.write( '<option value="'+i+'">' +state[i][0]+'</option>');
document.write( '</select>')
document.write( '<select name="countyID" size="1"
onChange="f2(th is.value)">')
document.write( '<option value="">-</option>')
document.write( '</select>')
document.write( '<select name="cropID" size="1">')
document.write( '<option value="">-</option>')
document.write( '</select>')
document.write( '<input type="submit"></form>')

/* UPDATE FUNCTIONS */

var CO = document.forms[0].elements['countyID']
var CR = document.forms[0].elements['cropID']

function f1(stateID) {
while (CO.options.len gth) CO.options[0] = null;
while (CR.options.len gth) CR.options[0] = null;
CR.options[CR.length] = new Option('-', '');
if (stateID == '' || state[stateID][1].length == 0) {
CO.options[CO.length] = new Option('-', '')
return
}
for (var i = 0; i < state[stateID][1].length; ++i)
CO.options[CO.length] =
new Option(county[state[stateID][1][i]][0], state[stateID][1][i]);
f2(state[stateID][1][0])
}

function f2(countyID) {
while (CR.options.len gth) CR.options[0] = null;
if (countyID == '' || county[countyID][1].length == 0) {
CR.options[CR.length] = new Option('-', '')
return
}
for (var i = 0; i < county[countyID][1].length; ++i)
CR.options[CR.length] =
new Option(crop[county[countyID][1][i]], county[countyID][1][i]);
}

--------------------------------------------------------------

Hope this helps,

--
Bart

[Navodit]

"Bart Van der Donck" <ba**@nijlen.co mwrote in message
news:11******** **************@ t39g2000prd.goo glegroups.com.. .

Navodit wrote:

>I have 3 dropdowns: dropdown1 (State), dropdown2 (County), dropdown3
(crop).
So the idea is that each state has different counties and different
permutations of state and counties lead to different sets of crops. I
have a
total of 63 combinations of sets of crops available right now. Each of
these
combinations can consist of one or more of the following: (crop1, crop2,
crop3, crop4, crop5, crop6, crop7). Right now each of these combinations
is
hardcoded.

I would like to improve the design of the code if it is possible. The way
I
see this problem is that each of those 63 combinations is just adding
different kinds of condiments (crops in our case!) depending on the state
and county selected by the user. This looks something like the decorator
pattern where we can decorate(add accessories) objects at runtime.
However I am not entirely sure if first this is a good example of
decorator
pattern and secondly if it is possible to implement something like this
in
Javascript. Any thoughts/ideas/suggestions would be welcome...

>if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insu rance.county.se lectedIndex == 1 ||
document.Insur ance.county.sel ectedIndex == 2 ||
document.Insur ance.county.sel ectedIndex == 100 ||
document.Insur ance.county.sel ectedIndex == 101))
{
document.Insur ance.Commodity. length = 5;
document.Insur ance.Commodity[1].value = "4116";
document.Insur ance.Commodity[1].text = "Corn";

document.Insur ance.Commodity[2].value = "81997";
document.Insur ance.Commodity[2].text = "Soybeans";

document.Insur ance.Commodity[3].value = "11997";
document.Insur ance.Commodity[3].text = "Wheat";

document.Insur ance.Commodity[4].value = "51997";
document.Insur ance.Commodity[4].text = "Grain sorghum";}

else if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insu rance.county.se lectedIndex == 4 ||
document.Insur ance.county.sel ectedIndex == 6 ||
document.Insur ance.county.sel ectedIndex == 94 ||
document.Insur ance.county.sel ectedIndex == 102))
{
document.Insur ance.Commodity. length = 4;
document.Insur ance.Commodity[1].value = "4116";
document.Insur ance.Commodity[1].text = "Corn";

document.Insur ance.Commodity[2].value = "81997";
document.Insur ance.Commodity[2].text = "Soybeans";

document.Insur ance.Commodity[3].value = "11997";
document.Insur ance.Commodity[3].text = "Wheat";}

else if .....

Two core thoughts in this kind of complex data architectures:
- never repeat the same data twice
- separate data initialization from application

--------------------------------------------------------------

/* DATA INITIALIZATION */

// crops in form "crop[ID] = name"
var crop = new Object()
crop['10'] = 'corn'
crop['28'] = 'lettuce'
crop['29'] = 'soyabeans'
crop['33'] = 'tomatoes'
crop['35'] = 'wheat'

// counties in form "county[ID] = [countyname, [crops in it]]"
var county = new Object()
county['1'] = ['North Florida', [10,29] ]
county['2'] = ['Central Florida', [10,28,29,35] ]
county['7'] = ['South Florida', [] ]
county['8'] = ['East Texas', [29,33] ]
county['9'] = ['West Texas', [28,33,35]]

// states in form "state[stateID] = [statename, [counties in it]]"
var state = new Object()
state['24'] = ['Florida', [1,2,7]]
state['31'] = ['Texas', [8,9]]

/* DISPLAY */

document.write( '<form>')
document.write( '<select name="stateID" size="1"
onChange="f1(th is.value)">')
document.write( '<option value="">-</option>')
for (var i in state)
document.write( '<option value="'+i+'">' +state[i][0]+'</option>');
document.write( '</select>')
document.write( '<select name="countyID" size="1"
onChange="f2(th is.value)">')
document.write( '<option value="">-</option>')
document.write( '</select>')
document.write( '<select name="cropID" size="1">')
document.write( '<option value="">-</option>')
document.write( '</select>')
document.write( '<input type="submit"></form>')

/* UPDATE FUNCTIONS */

var CO = document.forms[0].elements['countyID']
var CR = document.forms[0].elements['cropID']

function f1(stateID) {
while (CO.options.len gth) CO.options[0] = null;
while (CR.options.len gth) CR.options[0] = null;
CR.options[CR.length] = new Option('-', '');
if (stateID == '' || state[stateID][1].length == 0) {
CO.options[CO.length] = new Option('-', '')
return
}
for (var i = 0; i < state[stateID][1].length; ++i)
CO.options[CO.length] =
new Option(county[state[stateID][1][i]][0], state[stateID][1][i]);
f2(state[stateID][1][0])
}

function f2(countyID) {
while (CR.options.len gth) CR.options[0] = null;
if (countyID == '' || county[countyID][1].length == 0) {
CR.options[CR.length] = new Option('-', '')
return
}
for (var i = 0; i < county[countyID][1].length; ++i)
CR.options[CR.length] =
new Option(crop[county[countyID][1][i]], county[countyID][1][i]);
}

--------------------------------------------------------------

Hope this helps,

--
Bart

I am not sure if what you have mentioned here will work for my case since
county names are not unique. So both state1 and state2 can have countyA but
the crop options would be different for the two combinations...

[Bart Van der Donck]

Navodit wrote:

>[...]

I am not sure if what you have mentioned here will work for my
case since county names are not unique. So both state1 and
state2 can have countyA but the crop options would be different
for the two combinations...

There is not a real problem if each actual county can only be part of
one state at the same time (which I would say is the most logic real-
world situation). Counties may always share a same name as long as the
ID is unique to maintain your referential integrity:

county['1'] = ['North', [10,33] ] // county "North"in Florida
county['2'] = ['Center', [29,35] ]
county['5'] = ['North', [35] ] // county "North" in Texas
state['8'] = ['Florida', [1,2]]
state['9'] = ['Texas', [5]]

The crops can be different per county of course.

Alternatively - or combined - you could also assign a same county to
more than one state:

county['1'] = ['North', [10,33] ]
county['2'] = ['Center', [29,35] ]
state['8'] = ['Florida', [1,2]]
state['9'] = ['Texas', [1]]

County['1'] is here part of Florida and of Texas. But the real-world
idea is here that a county can belong to more than one state; I'm
unsure if that would be the right logic. You can't have different
crops per unique county in this scenario.

--
Bart

[Matt Silberstein]

On Mon, 23 Apr 2007 10:46:25 -0500, in comp.lang.javas cript ,
"Navodit" <ka******@uiuc. eduin <f0**********@n ews.ks.uiuc.edu >
wrote:

>Hi

I have a very typical problem which I believe might be more easily solvable
if it were designed better:

I have 3 dropdowns: dropdown1 (State), dropdown2 (County), dropdown3 (crop).
So the idea is that each state has different counties and different
permutations of state and counties lead to different sets of crops. I have a
total of 63 combinations of sets of crops available right now. Each of these
combinations can consist of one or more of the following: (crop1, crop2,
crop3, crop4, crop5, crop6, crop7). Right now each of these combinations is
hardcoded.

I would like to improve the design of the code if it is possible. The way I
see this problem is that each of those 63 combinations is just adding
different kinds of condiments (crops in our case!) depending on the state
and county selected by the user. This looks something like the decorator
pattern where we can decorate(add accessories) objects at runtime.
However I am not entirely sure if first this is a good example of decorator
pattern and secondly if it is possible to implement something like this in
Javascript. Any thoughts/ideas/suggestions would be welcome...

Navodit

p.s.: Some sample code to give you an idea of what I am talking about-

if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insu rance.county.se lectedIndex == 1 ||
document.Insur ance.county.sel ectedIndex == 2 ||
document.Insur ance.county.sel ectedIndex == 100 ||
document.Insur ance.county.sel ectedIndex == 101))
{
document.Insur ance.Commodity. length = 5;
document.Insur ance.Commodity[1].value = "4116";
document.Insur ance.Commodity[1].text = "Corn";

document.Insur ance.Commodity[2].value = "81997";
document.Insur ance.Commodity[2].text = "Soybeans";

document.Insur ance.Commodity[3].value = "11997";
document.Insur ance.Commodity[3].text = "Wheat";

document.Insur ance.Commodity[4].value = "51997";
document.Insur ance.Commodity[4].text = "Grain sorghum";
}
else if (document.Insur ance.State.sele ctedIndex == 1 &&
(document.Insu rance.county.se lectedIndex == 4 ||
document.Insur ance.county.sel ectedIndex == 6 ||
document.Insur ance.county.sel ectedIndex == 94 ||
document.Insur ance.county.sel ectedIndex == 102))
{
document.Insur ance.Commodity. length = 4;
document.Insur ance.Commodity[1].value = "4116";
document.Insur ance.Commodity[1].text = "Corn";

document.Insur ance.Commodity[2].value = "81997";
document.Insur ance.Commodity[2].text = "Soybeans";

document.Insur ance.Commodity[3].value = "11997";
document.Insur ance.Commodity[3].text = "Wheat";
}
else if .....
{

}

There are in total 63 different else if combinations... .

Where are you storing this data? It looks like you want each page to
do that. How about the user picks the state and you make a call to
pick up the county info for that state. When they pick a county you
make a call for crop info. That way you can keep all of the
information in a DB. And when you want more than crop info by county
you can easily add that.
--
Matt Silberstein

Do something today about the Darfur Genocide

http://www.beawitness.org
http://www.darfurgenocide.org
http://www.savedarfur.org

"Darfur: A Genocide We can Stop"