Javascript对象:基本知识差距

Question

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

我试图按产品对行进行分组，这样我就可以填充一个产品下拉列表，然后是一个与该产品相关的颜色下拉列表。那就是我被困的地方。

我有数据加载的ok和可以做表单显示的东西，只是需要一些洞察力如何结束如何构造这样的数组：

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;