使用 Javascript 将选项数组转换为变体数组

Question

我正在尝试创建电子商务仪表板。仪表板的一部分是为了让用户能够创建产品的变体。所以这是我到目前为止的想法：

const options = [
  {
    display_name: "Colour",
    _id: "5e70047aa2f3c2574a27e4a2",
    option_values: [
      {
        _id: "5e736980646ed90f741f1198",
        label: "Red"
      },
      {
        _id: "5e736980646ed90f741f1197",
        label: "Green"
      }
    ]
  },
  {
    display_name: "Size",
    _id: "5e70047aa2f3c2574a27e4a3",
    option_values: [
      {
        _id: "5e736980646ed90f741f1199",
        label: "Small"
      },
      {
        _id: "5e736980646ed90f741f1121",
        label: "Medium"
      }
    ]
  },
  {
    display_name: "Weight",
    _id: "5e70047aa2f3c2574a27e4g3",
    option_values: [
      {
        _id: "5e736980646ed90f741f1122",
        label": "10"
      }
    ]
  }
]

用户最终创建了一个包含 3 个对象的数组：颜色、尺寸、重量。每个对象内都有一个嵌套数组，其中包含 option_values。这包括例如 "Red" 和 "Green".

现在为了让它正常工作，我需要使用这个选项数组并将它转换成一个变体数组，如下所示：

const variants = [
  {
    price: 0,
    sku: "RED-SMALL-10",
    option_values: [
      {
        option_id: "5e736980646ed90f741f1198",
        id: "5e70047aa2f3c2574a27e4a2"
      },
      {
        option_id: "5e736980646ed90f741f1199",
        id: "5e70047aa2f3c2574a27e4a3"
      },
      {
        option_id: "5e736980646ed90f741f1122",
        id: "5e70047aa2f3c2574a27e4g3"
      },
    ]
  },
  {
    price: 0,
    sku: "RED-MEDIUM-10",
    option_values: [
      {
        option_id: "5e736980646ed90f741f1198",
        id: "5e70047aa2f3c2574a27e4a2"
      },
      {
        option_id: "5e736980646ed90f741f1121",
        id: "5e70047aa2f3c2574a27e4a3"
      },
      {
        option_id: "5e736980646ed90f741f1122",
        id: "5e70047aa2f3c2574a27e4g3"
      },
    ]
  },
  {
    price: 0,
    sku: "GREEN-SMALL-10",
    option_values: [
      {
        option_id: "5e736980646ed90f741f1197",
        id: "5e70047aa2f3c2574a27e4a2"
      },
      {
        option_id: "5e736980646ed90f741f1199",
        id: "5e70047aa2f3c2574a27e4a3"
      },
      {
        option_id: "5e736980646ed90f741f1122",
        id: "5e70047aa2f3c2574a27e4g3"
      },
    ]
  },
  {
    price: 0,
    sku: "GREEN-SMALL-10",
    option_values: [
      {
        option_id: "5e736980646ed90f741f1197",
        id: "5e70047aa2f3c2574a27e4a2"
      },
      {
        option_id: "5e736980646ed90f741f1121",
        id: "5e70047aa2f3c2574a27e4a3"
      },
      {
        option_id: "5e736980646ed90f741f1122",
        id: "5e70047aa2f3c2574a27e4g3"
      },
    ]
  }
]

使用此数组，用户将能够看到包含以下内容的变体：

Red - Small - 10
Red - Medium - 10
Green - Small - 10
Green - Medium - 10

如您所想，用户可以根据需要添加额外的重量，因此它可能看起来像这样：

Red - Small - 10
Red - Small - 12
Red - Medium - 10
Red - Medium - 12
Green - Small - 10
Green - Small - 12
Green - Medium - 10
Green - Medium - 12

我遇到的问题是将选项数组转换为变体数组。有人可以帮忙吗？

Answer 1

1) 首先通过检查选项构建可能的组合 sets。
2) 构建 idObj 键作为值 _id。
3) 从步骤 1 开始可能 sets 并以所需形式构建每个对象。

const variants = options => {
  let sets = [[]];
  const id_obj = {};
  options.forEach(option => {
    const new_sets = [];
    option.option_values.forEach(({ label, _id }) => {
      new_sets.push(Array.from(sets, set => [...set, label]));
      id_obj[label] = { id: option._id, value_id: _id };
    });
    sets = new_sets.flatMap(set => set);
  });

  return sets.map(set => ({
    price: 0,
    sku: set.join("-").toUpperCase(),
    option_values: set.map(label => ({ option_id: id_obj[label].value_id, id: id_obj[label].id }))
  }));
};

const options = [
  {
    display_name: "Colour",
    _id: "5e70047aa2f3c2574a27e4a2",
    option_values: [
      {
        _id: "5e736980646ed90f741f1198",
        label: "Red"
      },
      {
        _id: "5e736980646ed90f741f1197",
        label: "Green"
      }
    ]
  },
  {
    display_name: "Size",
    _id: "5e70047aa2f3c2574a27e4a3",
    option_values: [
      {
        _id: "5e736980646ed90f741f1199",
        label: "Small"
      },
      {
        _id: "5e736980646ed90f741f1121",
        label: "Medium"
      }
    ]
  },
  {
    display_name: "Weight",
    _id: "5e70047aa2f3c2574a27e4g3",
    option_values: [
      {
        _id: "5e736980646ed90f741f1122",
        label: "10"
      }
    ]
  }
];

console.log(variants(options));

使用 Javascript 将选项数组转换为变体数组

Converting an options array into a variants array using Javascript

javascript

arrays

e-commerce