我正在购物网站,并希望让我的用户能够根据他们指定的变体动态创建多个产品.我允许这些用户创建任意数量的“类型”,这些类型定义了大小,颜色或容量等内容.但是用户可以指定它的名称和所需的类型数.

在每个Type中,我还允许用户配置多个Choices.例如,类型Size可能有Small,Medium,Large选项.用户再次可以定义这些字段的名称,并且对它们可以创建的字段数量不应有任何限制.

用户完成产品定义后,我有一个类型数组,每个类型内部都有一个数组供选择.

作为示例,移动电话产品可能具有以下类型和选择结构：

[
  {
  'id': 1,'type': 'Colour','options': ['Black','White','Gold']
  },{ 
  'id': 2,'type': 'Size','options': ['Standard','Large"']
  },{ 
  'id': 3,'type': 'Capacity','options': ['32GB','64GB','128GB']
  }
]

根据这些数据,我想创建18(3 * 2 * 3)种可能的产品变体,用户可以为其指定特定的价格,重量或SKU选项.最终得到以下变体：

Black - Standard - 32GB
Black - Standard - 64GB
Black - Standard - 128GB
Black - Large - 32GB
Black - Large - 64GB
Black - Large - 128GB
White - Standard - 32GB
White - Standard - 64GB
White - Standard - 128GB
White - Large - 32GB
White - Large - 64GB
White - Large - 128GB
Gold - Standard - 32GB
Gold - Standard - 64GB
Gold - Standard - 128GB
Gold - Large - 32GB
Gold - Large - 64GB
Gold - Large - 128GB

我可以想象在这样的数组中：

[
  {
    'variant_id': 1,'options':
      [{ 'type': 'Colour','choice': 'Black' },{ 'type': 'Size','choice' 'Standard' },{ 'type': 'Capacity','choice' '32G' }]
  },{
    'variant_id': 2,'choice' '64GB' }]
  },{
    'variant_id': 3,'choice' '128GB' }]
  }
<snip>

我的问题是我如何创建一个循环,允许我迭代各种类型和选择来创建我的最终变体列表？我很难想象我将如何提供这个功能.

请尝试以下代码.它完全符合你想要的纯JavaScript.
generateOutput函数在循环中为第一个元素的选项调用,然后generateOutput函数被称为递归生成所需的结果.写作中的逻辑难以解释.只需添加调试器并了解流程.祝你好运.

var data = [{
  'id': 1,'Gold']
},{
  'id': 2,'Large"']
},{
  'id': 3,'128GB']
}];



function generateOutput(dataIndex,optionIndex) {
  var option,result,i,subResult;
  option = {
    type: data[dataIndex].type,choice: data[dataIndex].options[optionIndex]
  };

  if (dataIndex == data.length - 1) {
    result = {
      isLast: true,options: [option]
    }
    return result;
  }

  result = [];
  for (i = 0; i < data[dataIndex + 1].options.length; i++) {
    subResult = generateOutput(dataIndex + 1,i);
    if (subResult.isLast) {
      subResult.options.unshift(option);
      result.push(subResult.options);
    } else {
      result = result.concat(subResult);
    }
  }

  if (!subResult.isLast) {
    for (var j = 0; j < result.length; j++) {
      result[j].unshift(option);
    }
  }

  return result;
}

function getoutput() {
  var result = [],option,i;
  for (i = 0; i < data[0].options.length; i++) {
    option = {
      type: data[0].type,choice: data[0].options[i]
    };
    var subResult = generateOutput(0,i);
    if (subResult.isLast) {
      result.push(subResult.options);
    } else {
      result = result.concat(subResult);
    }
  }
  
  var output = [];
  for (i = 0; i < result.length; i++) {
    output.push({
      variant_id: (i+1),options: result[i]
    })
  }
  return output;
}

console.log(getoutput());