JavaScript 对象 : Basic Knowledge Gap

Question

尝试创建一组由 google 电子表格驱动的 html 表单选项/选择字段，以引导用户进行特定选择。想想一顶有红色、蓝色或黑色可供选择的帽子，一件有蓝色、绿色或红色可供选择的 T 恤。源数据在第 1 列中的许多行具有相同的值，在第 2 列中具有唯一值。颜色特定于每个产品。 (电子表格结构无法更改。)

我正在尝试按产品对行进行分组，以便我可以填充产品下拉列表，然后填充与该产品相关的颜色下拉列表。这就是我被困住的地方。

我的数据加载正常，并且可以执行表单显示的操作，只需要了解如何结束如何构造这样的数组:

var productsAndColors = [];
productsAndColors[0] = new Array("hat", ["pink", "red", "blue"]);

这里只是引用不确定的部分:

for (i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    product = entry.gsx$product.$t;
    productsAndColors[i] = ['', []];
    if (productCheck != product) {
        productsAndColors[i][0] = product;
        thisShape = product;
    }
    color = entry.gsx$color.$t;
    productsAndColors[i][1].push(color);
}

这会为每行创建一个数组，但似乎无法找到对行进行分组的方法。我意识到这是穴居主义。

感谢您的想法。

http://jsfiddle.net/hartogsmith/SqNNk/

https://docs.google.com/spreadsheet/ccc?key=0AkT3oKFSug31dGhva1lpWkhDOGxKaVJsNnpkZVpNbUE#gid=0

Answer 1

为什么不选择类型不太严格的东西呢？

如果您愿意从第一个下拉列表(即“产品”)中将 .value 设置/读取为字符串，那么您可以拥有一个简单的对象，如下所示:

var products = {
    hat : {
        colours : [ "red", "green", "blue", "black", "grey" ]
    },
    shirt : {
        colours : [ "pink", "salmon", "mauve", "chartreuse" ]
    }
};

可能更简单:

var products = {
    hat : [ "grey", "gray", "charcoal", "smoke" ],
    shirt : [/*...*/]
};

那么为什么要添加“颜色”作为每个属性呢？
仅仅因为它是一个对象的形容词，您可能希望向其中添加更多形容词:.size : []、.shipping_options : []、.cut : []。

shirt : {
    size : [],
    logo : [],
    cut  : []
}

你真的不想最终陷入:

products[0][1][1]
products[1][2][3]

世界。

试试这个:

var Products = {},
    product_type,
    current_value,
    color_arr;

for (...) {
    product_type  = entry.gsx$product.$t;
    current_value = entry.gsx$color.$t;

    Products[product_type] = Products[product_type] || { colors : [] };
    /* same as:
        if (!Products.hat) { Products.hat = { colors : [] }; }
        ...basically, Products.hat == itself, else a new object
    */
    color_arr = Products[product_type].colors;
    color_arr.push(current_value);

}

现在，您可以说Products.hat.colors[1]

如果你像这样设置第一个下拉菜单:

<select name="product">
    <option value="hat"  >Cap</option>
    <option value="shirt">Tee</option>
</select>

然后:

var type = product_select.value,
    avail_colours = Products[type].colors;