JSFiddle - React, Tailwind, and code Playground

by rickysullivan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.8.2/lodash.min.js"></script>

JavaScript

_.mixin({
  combine: function() {
    return _.reduce(Array.prototype.slice.call(arguments, 1), function(ret, newarr) {
      return _.reduce(ret, function(memo, oldi) {
        return memo.concat(_.map(newarr, function(newi) {
          return oldi.concat(newi);
        }));
      }, []);
    }, _.map(arguments[0], function(i) {
      return [i];
    }));
  }
});

function _cartesianProductOf(args) {
    if (arguments.length>1) args=_.toArray(arguments);

    // strings to arrays of letters
    args=_.map(args, opt=>typeof opt==='string'?_.toArray(opt):opt)

    return _.reduce(args, function(a, b) {
        return _.flatten(_.map(a, function(x) {
            return _.map(b, function(y) {
                return _.concat(x,[y]);
            });
        }), true);
    }, [ [] ]);
}

function _cartesianProductObj(optObj){
    var keys = _.keys(optObj);
    var opts = _.values(optObj);
    var combs = _cartesianProductOf(opts);
    return _.map(combs,function(comb){
        return _.zipObject(keys,comb);
    });
}

var data = {
  "variations": {
    "version": ["sport", "generic"],
    "device": ["mobile", "tablet"],
  }
}


console.log(_cartesianProductObj(data.variations));