JS OBJECT and defining Arrays as attributes of the object...how????

[BrightNail]

hi all,

I have a complex problem...and here is my idea, actually, this is why I need it..

I have a bunch of pricing and items that are all associated by a common reference, or number...but they are returned by the database as such..

Now, if someone selects a certain "price" from the dropdown, that price has a corresponding "price level"..now, I go to all the other prcing on the page and selections, and popuplate "those" select boxes with the approprate 'price level' attributes...

in other words, if someone selects ($100) from a pulldown, we are assuming that THAT price level is what they want to spend, so I populate the "OTHER" pulldowns to refelct this price level on the other availble priceing and items....

so, I could have multi-dimensional ARRAYS of the different pricing and their corresponding attributes....

but I was thinking of creating a seperate OBJECT for each price level...and then if someone selects a certain price level, I GO TO THE OBJECT,,,run thru some functions...and that object displays the dropdowns.....,BUT HOW WOULD I ARCHITECT THIS????
here is my idea

object one:

var pricelevel_1 = new Object
pricelevel_1.price1= new Array("10.00");
pricelevel_1.price2= new Array("14.00");
pricelevel_1.price3= new Array("20.00");
pricelevel_1.location= new Array("westside","eastside","northside");
pricelevel_1.item= new Array("car","bike","skateboard");

object TWO:

var pricelevel_2 = new Object
pricelevel_2.price1= new Array("11.00");
pricelevel_2.price2= new Array("14.50");
pricelevel_2.price3= new Array("25.00");
pricelevel_2.location= new Array("westside","eastside")
pricelevel_2.item= new Array("car","model","skateboard");


You see how, dending on the OBJECT (price level), different things can be populated into the dropdown.....

How do I, given the exmaple, populate seperate select boxes for each object AND how would I call to the right object (I am guessing the selectedindex)...

(select name="price1")
(select name="price2")
(select name="price3")
(select name="location")
(select name="item")

these would be the seperate dropdowns......how would I go into the object, and reiterate thru the objects attributes arrays????

[joh6nn]

i have a couple of ideas, but i also have a couple of questions.

pricelevel_2.price1= new Array("11.00");
pricelevel_2.price2= new Array("14.50");
pricelevel_2.price3= new Array("25.00");

each of those arrays only has one item in them. could they in theory have more than one item, or could they only ever have one item?

if they can only have one item, then why not like this:

pricelevel_2.price = new Array("11.00", "14.50","25.00");

[BrightNail]

I guess they "could' be in that one array..

but EACH of those 'new Arrays" represents a price dropdown...so I thought to just apply each array to its own dropdown, rather than having multple price select boxes represent one array...

why would you do it this way? and how would I match up the various price dropdowns to that one array?...

anyways, I interested to see what you propose..

thansk,
james

[RadarBob]

First, I assumed there is something that reflects the real world - an item is for sale. So I created a SaleItem object. I'm not 100% clear on your intended data relationships. Basically build a heirarchy of objects that reflects that relationship.

Then an array of SaleItems is a Pricelevel object.

Then an array of Pricelevel objects is an Inventory object.


// This object is basically an array of all your price levels

function PriceStructure (stuff) {
this.inventory = stuff; // expecting an array of PriceLevel objects

// methods
this.getPriceLevel = getPriceLevel;
}

function getPriceLevel (theLevel) {
var thisLevel = null;

for (var i=0; i<this.inventory.length; i++) {
if (this.inventory[i].SpendLimit == theLevel) {
thisLevel = this.inventory[i];
}
}

return thisLevel;
}// getPriceLevel



// A PriceLevel Object
function PriceLevel (target, items) {
this.SpendLimit = target;
this.items = items; // expecting an array of SaleItem objects

// methods
this.getPriceList = getPriceList;
this.getItemByThing = getItemByThing;
this.getItemByPrice = getItemByPrice;
this.getItemByLocation = getitemByLocation;

}// PriceObj


function getPriceList () {
var priceList = new Array();

for (var i=0; i<this.items.length; i++) {
priceList[i] = this.items[i].price;
}

return priceList;
}// getPriceList();


function getItemByThing (theThing) {
var thisItem = null;

for (var i=0; i<this.items.length; i++) {
if (this.items[i].thing == theThing) {
thisItem = this.items[i];
}
}

return thisItem;
}// getSaleItem()


// A SaleItem Object
function SaleItem (item, cost, place) {
this.thing = item;
this.price = cost;
this.location = place;
}





// building your object heirarchy. do this on page load
var things = new Array();
things[0] = new SaleItem ("car","10.00", "westside");
things[1] = new SaleItem ("bike", "14.00", "eastside");
. . .

var fifties = new PriceLevel ("50.00", things);

// repeat above to create as many price levels as you need, then...

var stuff = new Array();
stuff{0] = fifties;
stuff[1] = hundred;
stuff[2] = twohund;
stuff[3] = thousand;
. . .

// make sure this is a global object
var MyInventory = new PriceStructure (stuff);




not sure if this is right
// using your object | | |
//********************** V V V
<select name="priceRangeList" onclick="buildPullDowns(this.options.selectedIndex);"></select>
<select name="priceList"></select>
<select name="locationList"></select>
<select name="itemList"></select>


// "PriceLevel" parameter is the specific price level selected from the pull down
function buildPullDowns(PriceLevel) {
var MyPriceLevel = MyInventory.getPriceLevel(PriceLevel);

buildPricePullDown (MyPriceLevel);
buildLocationPullDown (MyPriceLevel);
buildItemPullDown (MyPriceLevel);

}// buildPullDowns()


function buildPricePullDown (thePriceLevel) {
var myPriceList = new Array();

myPriceList = thePriceLevel.getPriceList();


for (var i=0; i<myPriceList.length; i++) {
document.myform.priceList.options[i] = new Option (myPriceList[i],myPriceList[i], false, false);
}
}// buildPricePullDown()

[BrightNail]

okay,
that code looks hefty....

let me give you the drop downs which are generated via a database...but I cycle thru them to create the drop downs initially on page load..but they also populate arrays or objects (still deciding based on your code on how to go about this)....

here is a short example of the pulldowns..

Adult Pricing:
<select name="price_select0">
<option value="10.00'>10.00</option>
<option value="15.00'>15.00</option>
<option value="26.00'>26.00</option>
<option value="32.00'>32.00</option>
</select>

Child Pricing:
<select name="price_select1">
<option value="10.00'>10.00</option>
<option value="17.00'>17.00</option>
<option value="28.00'>28.00</option>
<option value="32.00'>32.00</option>
</select>

Child Pricing:
<select name="price_select2">
<option value="11.00'>11.00</option>
<option value="17.00'>17.00</option>
<option value="28.00'>28.00</option>
<option value="35.00'>35.00</option>
</select>

Location:
<select name="location">
<option value="eastside'>eastside</option>
<option value="westside'>westside</option>
<option value="northside'>northside</option>
<option value="southside'>southside</option>
</select>

Item: (the price level notation will not be in the text description, I'm just showing you that within the items, there can be many attributes for a certain price level,,even for location above)
<select name="item">
<option>bike (price level 1)</option>
<option>skateboard(price level 1)</option>
<option>tennis ball(price level 1)</option>
<option>soccer ball(price level 1)</option>
<option>bike (price level2)</option>
<option>skateboard(price level 2)</option>
<option>tennis ball(price level 2)</option>
<option>soccer ball(price level 2)</option>
<option>bike (price level3)</option>
<option>skateboard(price level 3)</option>
<option>tennis ball(price level 3)</option>
<option>soccer ball(price level 3)</option>
<option>bike (price level4)</option>
<option>skateboard(price level 4)</option>
<option>tennis ball(price level 4)</option>
<option>soccer ball(price level 4)</option>
</select>


Okay, so here is the idea......all options are available on "page load"...the database code populates the selects...then the javascript comes into play...

Lets say, I select price level 2 from the child dropdown (any of them)....

Now, ALL other drop downs will then reflect that price level....

See, it doesn't matter WHICH select drop down you go to first....whatever you select.....all the other drop downs change to reflect that...

so, if I went to "tennis ball (price level 4)" -though that '(price level 4)' woulnt' actually show -- all other drops downs (adult, child, location..would change to price level 4 and DISABLE itself)..

.disable =true;

I hope I am being clear...but the select box in which you choose first doesn't disable.....

there will also be a "reset" button on the page..so someone can "load" up all the select boxes to start over...

is this doable?

[RadarBob]

is this doable?
Sounds like it is.

Sorry to be so dense, but still I don't understand your data relationships. This has a direct bearing on the final solution.

Yep, at first blush all that code does look intimidating; but look closely. I've now highlighted the object method calls.. Notice the way things are referenced, with a dot-notation heirarchy and descriptive names. And, if you think about it, none of the functions/methods is really complex. I think it's only that you have to get used to the object notation. Then you'll realize that a "PriceStructure" nothing more than a 3 dimentional array.

THE key thing about javaScript objects, IMHO, is that it reduces complexity significantly. You still have to build those arrays you need, but by encapsulating them all in an object, then at the "top level" of your code, where you're calling functions from onclick events, building your dropdown boxes, etc., the code looks downright trivial.

Just look at the above code as 3 pieces:
[list=1]
The object(s) itself - with it's variables (aka "properties") and functions (aka "methods").
Building your object - typically on page load
Functions called by the events, like onclick. These functions "use" the object by calling the appropriate functions.
[/list=1]

In contrast, without objects you'd have generic array subscript notation flying all over the place! In your case I see a possibility of a 3 subscript array. And worst of all the order of your data in the array is critical. In other words you need to remember at sub[1] for example is the price (by contrast in an object you "ask" for it by name) and sub[1,2] is this price, this location and sub[1][2][3] is this price, this location, this whatever! Compare non-object "myarray[1,2,3] to "myInventory.myPriceLevel.myLocation".


Make things as simple as possible, but no simpler
- Albert Einstein

[BrightNail]

hey,

the data relationships in the above example would be as follows...


pricing level 1
[
10.00,10.00,11.00
eastside
bike (price level 1)
skateboard(price level 1)
tennis ball(price level 1)
soccer ball(price level 1)
]


pricing level 2
[
15.00,17.00,17.00
westside,southside (added this in for complex sake)
bike (price level 2)
skateboard(price level 2)
tennis ball(price level 2)
soccer ball(price level 2)
]


etc...for price level 3 and 4..

those prices..are for the dropdowns....
(adult)(child)(child).....BUT those can change too...there might be more or less..but of course, we get that from the database...so that is not a worry....just the set up is for me..

but on first page load,,,,all pricelevels are present in each drop down...

when you 'select' a dropdown AFTER page load,,,you them 'select an item"..but you are really selecting a price level.....'see the relationships above'.......

when you select price level 2.....all those items are related in that those items belong to their respective dropdowns BUT they are 'under' pricelevel 2....

does that make better sense...its a hard thing to wrap the brain around...

[RadarBob]

pricing level 1
[
10.00,10.00,11.00
eastside
bike (price level 1)
skateboard(price level 1)
tennis ball(price level 1)
soccer ball(price level 1)
]

Is this "pricing level thingy" above telling me that a bike can cost .. what? and a skateboard costs 10? 11? which? any? And what is 'eastside' all about? a bike | tennis ball | soccer ball | skateboard at pricing level one is available only on the east side? Why only 3 prices for 4 items?

The bottom line is, in real life someone buys something at it's specific price. I can see where items would be grouped into price ranges, but beyond that your "price level" scheme makes no sense to me. Sorry. How your data is stored, and the respective keys should give a big clue as to the data relationships.

[BrightNail]

pricing level 1
[
10.00,10.00,11.00
eastside
bike (price level 1)
skateboard(price level 1)
tennis ball(price level 1)
soccer ball(price level 1)
]


okay I see how you are looking at things...this is a "search" function type thing...so, we aren't looking at things as absolute relationships but rather...ranges...DON"T look at the pricing, those are just pricing I put in there...they could be 100,140,120.....I was just showing what could be givein back from the database...

the prices aren't different really, they just show that between child and adult, the prices can be different....BUT they represent price levels...so, when bike, skateboard, tennis ball, soccer ball...show up
we are using parameters to 'search'..

so, for arguments sake...lets say....we chose level 1 pricing... from adult.....all the adult pricing will show (it won't disable on any element cause we picked that drop down first, adn that will be our master selection)...all other PRICING will disable on that particular price level....and the
Location and Items selects will just show only the options attributed to that price level...

now, we 'would' search all these parameters....for child and adult and those items that fall under the price level...--->

so, we would get results ( on the subsequent page which I don't have to worry about)...that would give us "the items" ala..skateboard etc... and the locations (eastside, westside)..and the pricelevels...

the relationship is 'ranges' to search...not absolute pricing......

hope that helps....

also, do you have or know where to go to get good tutorials on objects and stuff....

james