Add-to-cart box

gistfile1.js

// 1. Grab a list of all the stock options to populate the stock options
// Endpoint: /a/product/:productId/stock/options
var options = 
{
  "color":[{"3":"Black"},{"346220":"Tailored Grey"}],
  "d15":[{"125699":"XS (US 0-2)"},{"125701":"MD (US 8-10)"},{"125702":"LG (US 12-14)"},{"125703":"XL (US 16)"}],
  "d46":[{"93358":"31"}
  ]
}

// 2. Grab a list of the available inventory
// Endpoint: /a/product/:productId/stock/inventory
var inventoryData = 
{
  "keyMappings":{"d46":0,"color":1,"d15":2,"onHand":3},
  "slimStockData":[
    // d46  , color  , d15    , onHand
    ["93358","346220","125703","1"],
    ["93358","3","125699","7"],
    ["93358","3","125701","4"],
    ["93358","3","125702","11"],
    ["93358","3","125703","12"]
  ]
}

// 3. Once the user makes a selection, you could loop through and figure out which of the option values are valid/invalid

// Populate your selections object
var selections = {'d15':'125701'};
// Grab a list of the filtered options
var filteredOptions = filterValues(fullStockData, selections);
// returns: { d46: { '93358': 1 }, color: { '3': 1 }, d15: { '125701': 1 } }

// The options + filteredOptions objects gives you enough information to determine whether a particular combination of
// selections is available or not.

// For each selection type (ex: color, d3, d4)
for(key in options) {
  // Grab their full list of values
  var vals = options[key];   
  // Iterate through each selection option
  for(var i=0; i<vals.length; i++) {
    // Grab the value id
    var valId = Object.keys(vals[i])[0];
    // Check to see if this option is still available in the filteredOptions
    var availableVals = filteredOptions[key]; // ex: { '3': 1, '346220': 1 }
    if(availableVals[valId]) {
      console.log('AVAILABLE', key, vals[i]);
    }
    else {
      console.log('NOT AVAILABLE', key, vals[i]);
    }
  }
}