Data from Google Spreadsheet to Javascript Object

Data from Google Spreadsheet to Javascript Object

trying to create a set of of html form option/select fields that are
driven by a google spreadsheet, to steer users to specific choices. think
a hat that is available in red, blue or black, a tshirt that is available
in blue, green or red. the source data has the same value in col 1 for
many rows, and unique values in col 2. the colors are specific to each
product. (the spreadsheet structure can not be changed.)
i'm trying to group the rows by product, so i can populate a product
dropdown, then a colors dropdown that is keyed to that product. that's
where i'm stuck.
i have the data loading ok and can do the form displays stuff, just need
some insight into how to end how to structure an array like this: var
productsAndColors = []; productsAndColors[0] = new Array("hat", ["pink",
"red", "blue"]);
just quoting the iffy bit here:
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);
}
this creates an array per row, just can't seem to figure out a way to
group the rows. i realize this is cavemanish.
thanks for your thoughts.
http://jsfiddle.net/hartogsmith/SqNNk/
https://docs.google.com/spreadsheet/ccc?key=0AkT3oKFSug31dGhva1lpWkhDOGxKaVJsNnpkZVpNbUE#gid=0