Question

I’ve got some routines in an XSLT stylesheet that process an XML file to display a product to a user in a web page (ASP.NET). The XSLT stylesheet outputs an html to display the product as well as any variations of the product, such as size, color, package quantity, style, etc.

The variations are handled as arbitrary. None of my code actually refers to the variations specifically. The XML always contains a node tree of variations that the product can have. Then each product includes these variations. For example, in the XML:

<Variations>
    <Variation>
        <Name>Color</Name>
    </Variation>
    <Variation>
        <Name>Size</Name>
    </Variation>
</Variations>

From this information I know to create two controls. One to provide Color selection, the other to provide Size selection.

Each variation of the product is listed in the XML in its own node. It has a unique product ID – different from all the other product variations. For example:

<Product>
    <ID>000001</ID
    <VariationAttribute>
        <Name>Color</Name>
        <Value>Green</Value
    </VariationAttribute>
    <VariationAttribute>
        <Name>Size</Name>
        <Value>6</Value>
    </VariationAttribute>
</Product>
<Product>
    <ID>000002</ID
    <VariationAttribute>
        <Name>Color</Name>
        <Value>Multiple(orange)</Value
    </VariationAttribute>
    <VariationAttribute>
        <Name>Size</Name>
        <Value>6</Value>
    </VariationAttribute>
</Product>

In my XSLT I create a unique list of all possible values of an attribute. For example, many of the products have a color of green, but in different sizes. Many of the products have a size of 6, but in different colors. So I do a unique sort on each attribute and create DropDownLists in my XSLT.

Now I needed a way of allowing the user to add an item to their shopping cart. This would require knowing the product ID, and so my XSLT also creates a few JSON objects. One of the objects contains the possible variation attributes and the name (ID) of the control that provides selection of the attribute options, like this:

var propCtlMap = [{"Color": "ddColor","Size": "ddSize"}]

Another JSON object contains a list of all the possible product configurations, like this:

var datalist = [
{"pID": "000001","Color": "Green","Size": "6"},
{"pID": "000002","Color": "Multiple(orange)","Size": "6"},
{"pID": "000003","Color": "Multiple(purple)","Size": "6"},
{"pID": "000004","Color": "Multiple(red)","Size": "6"},
{"pID": "000005","Color": "Purple","Size": "6"},
{"pID": "000006","Color": "Green","Size": "8"},
{"pID": "000007","Color": "Multiple(orange)","Size": "8"},
{"pID": "000008","Color": "Multiple(purple)","Size": "8"},
{"pID": "000009","Color": "Multiple(red)","Size": "8"},
{"pID": "000010","Color": "Purple","Size": "10"},
etc, etc
]

So far, I have all of this working. I’ve got JQuery events that handle a DropDownList .change. Then map all of the selected variation options to a product ID. This allows me to include a product ID in a hidden field so that when the user clicks the “Add to Cart” button, their choices are handled. Again, all this works fine.

Now to my specific question… I want to be able to disable variation options that are not available/not in stock. I know it’s possible to disable a selection in a DropDownList. I’ve got code for that written in ASP. I think I can convert it to JQuery, but what I don’t know how to do is determine (from datalist above, in JQuery) which options are not available. In datalist above, there are 3 possible sizes – 6, 8 and 10. Green is available in sizes 6 and 8, but not in 10. Likewise, purple is available in size 10, but not in 6 or 8.

I’m thinking there must be some method/function using JQuery/Javascript that can help me make a matrix of all the options so I can disable ones that aren’t valid. In the example above, if a user selected Purple, I’ll want a list of all sizes available in that color. Likewise, if a user selected size 8, I want a list of all colors available in that size.

I think if I knew how to get these lists I could handle most the rest of the coding.

Btw, I’ve only been learning JQuery/Javascript for about 2 weeks now. I know very little but am catching on.

Thanks.

Answer 1

You can use jQuery’s grep function to filter your array:

var objectArray = JSON.parse(json);

var purpleElements = $.grep(objectArray, function (element, index) {
    // purpleElements will contain all of those values in objectArray for which
    // this function returns true.
    return element.Color === "Purple";
});

$.each(purpleElements, function (index, element) {
    alert(element.Color + ": " + element.Size);
});

Will alert: Purple: 6, Purple: 10.

If you just wanted a list of Sizes you could then use jQuery’s map function to transform the array:

var sizes = $.map(purpleElements, function (element, index) {
    // sizes will contain an array of the return values of this function
    // for each element in purpleElements.
    return element.Size;
});

$.each(sizes, function (index, element) {
    alert(element);
});

Will alert 6, 10.

See this jsFiddle.