Question

我有一个允许用户创建选项组的页面，并为每个选项组创建一系列选项。

E.g。
颜色
*绿色 *蓝色 *红色

尺寸
*小
*中等
*大

颜色和大小是选项组。

用户可以创建任意数量的组和选项。

我正在努力寻找的方法是根据可用选项的数量创建所有可能变体的列表。

理想情况下，我想要的是一个具有名为“options”的属性的对象，该属性是一个包含此变体由例如组成的选项的数组。

[  
  { options : [ { name: "Green" } , { "name" : "Small" } ] },  
  { options : [ { name: "Green" } , { "name" : "Medium" } ] },  
  { options : [ { name: "Green" } , { "name" : "Large" } ] },  
  { options : [ { name: "Blue" } , { "name" : "Small" } ] },  
  { options : [ { name: "Blue" } , { "name" : "Medium" } ] },  
  { options : [ { name: "Blue" } , { "name" : "Large" } ] },  
  { options : [ { name: "Red" } , { "name" : "Small" } ] },  
  { options : [ { name: "Red" } , { "name" : "Medium" } ] },  
  { options : [ { name: "Red" } , { "name" : "Large" } ] },  

]

我可以想象某种程度的递归是必需的，但我真的很难写出正确的JavaScript代码。

非常感谢任何帮助。提前致谢

编辑：看起来我没有正确解释自己，为此道歉。我可以看到提供的一些解决方案首先循环颜色然后是大小，但是，如上所述，用户可以创建任意数量的组，而这些解决方案仅限于2组，例如可能有更多选项组，如“鞋子尺寸“，”存储容量“，”屏幕尺寸“等

我想解决的问题是在电子商务网站上创建库存变化，每个产品可以有不同的选项。

最终结构将包含我在上面的示例中给出的更多数据，因此更像是：

[  
  { sku: "PRODUCT1-GRSM", options : [ { name: "Green" } , { "name" : "Small" } ] },  
  { sku: "PRODUCT1-GRMD", options : [ { name: "Green" } , { "name" : "Medium" } ] },  
  { sku: "PRODUCT1-GRLG", options : [ { name: "Green" } , { "name" : "Large" } ] },  
  { sku: "PRODUCT1-BLSM", options : [ { name: "Blue" } , { "name" : "Small" } ] },  
  { sku: "PRODUCT1-BLMD", options : [ { name: "Blue" } , { "name" : "Medium" } ] },  
  { sku: "PRODUCT1-BLLG", options : [ { name: "Blue" } , { "name" : "Large" } ] },  
  { sku: "PRODUCT1-RESM", options : [ { name: "Red" } , { "name" : "Small" } ] },  
  { sku: "PRODUCT1-REMD", options : [ { name: "Red" } , { "name" : "Medium" } ] },  
  { sku: "PRODUCT1-RELG", options : [ { name: "Red" } , { "name" : "Large" } ] },  

]

该数据将绑定到一个表，该表包含每个生成的变体的输入字段，但它会生成这些变量，这是问题。感谢

Answer 1

可能这就是你要问的问题：

var color = ["red","blue"];
var size = ["Small","Medium","Large"];

var options = [];

for(var i=0;i<color.length;i++)
{
for(var j = 0;j<size.length;j++)
{
    var item = [];
    item.push({name:color[i]},{name:size[j]});
    options.push({options:item});
}
}
console.log(options);//options will contain your desired result

您可以分别在color和size数组中动态添加颜色，大小，然后您将获得所需的输出。

Answer 2

这很老了，但是如果您想支持任意数量的属性：

function add_variations_to_array(base, variations){
    let ret = [];
    for(let e of base) 
    for(let variation of variations){
        ret.push(e+" - "+variation);
    }
    return ret;
}

//Size, color, material
let attributes = [["S","M","L","XL"],["Red","Green","Blue"],["Wool","Cotton","Steel"]];

//generate variations
let variations = attributes[0];
if(attributes.length > 1){
    for(let i in attributes)
    if(i>0)
        variations = add_variations_to_array(variations, attributes[i]);
}
console.log(variations);

https://jsfiddle.net/pswkzLga/

如何生成对象的变体？

2 个答案: