Javascript：对产品选项组合的平面数组进行分组和嵌套

我有一个扁平的产品选项组合数组，如“衬衫类型”、“颜色”和“尺码”，我想将其转换为一个分组的嵌套列表，以便更容易地呈现给客户

• 嵌套可以达到最深的级别（我下面的示例显示了3个级别，但其他项目可能只有1或2个）
• 平面阵列中的产品选项对象可能会以某种形式出现 随机订购（即t恤，然后是运动衫，然后是t恤 再次）
• 并非每个组中都存在每个值（即大小XL可能仅显示 白色T恤）
• 此示例显示衬衫，但选项类型可能完全不同 其他项目不同（即“optionType1”可能是“框架尺寸”）

我需要转换的数据组合示例：

[
  {
    "skuid": "TSWHTM",
    "optionType1": "Shirt Type",
    "optionName1": "T-Shirt",
    "optionValue1": "TS",
    "optionType2": "Color",
    "optionName2": "White",
    "optionValue2": "WHT",
    "optionName3": "Size",
    "optionType3": "Medium",
    "optionValue3": "M"
  },
  {
    "skuid": "TSWHTL",
    "optionType1": "Shirt Type",
    "optionName1": "T-Shirt",
    "optionValue1": "TS",
    "optionType2": "Color",
    "optionName2": "White",
    "optionValue2": "WHT",
    "optionType3": "Size",
    "optionName3": "Large",
    "optionValue3": "L"
  },
  {
    "skuid": "TSBLKM",
    "optionType1": "Shirt Type",
    "optionName1": "T-Shirt",
    "optionValue1": "TS",
    "optionType2": "Color",
    "optionName2": "Black",
    "optionValue2": "BLK",
    "optionType3": "Size",
    "optionName3": "Medium",
    "optionValue3": "M"
  },
  {
    "skuid": "TSBLKL",
    "optionType1": "Shirt Type",
    "optionName1": "T-Shirt",
    "optionValue1": "TS",
    "optionType2": "Color",
    "optionName2": "Black",
    "optionValue2": "BLK",
    "optionType3": "Size",
    "optionName3": "Large",
    "optionValue3": "L"
  },
  {
    "skuid": "SSWHTM",
    "optionType1": "Shirt Type",
    "optionName1": "Sweatshirt",
    "optionValue1": "SS",
    "optionType2": "Color",
    "optionName2": "White",
    "optionValue2": "WHT",
    "optionType3": "Size",
    "optionName3": "Medium",
    "optionValue3": "M"
  },
  {
    "skuid": "SSWHTL",
    "optionType1": "Shirt Type",
    "optionName1": "Sweatshirt",
    "optionValue1": "SS",
    "optionType2": "Color",
    "optionName2": "White",
    "optionValue2": "WHT",
    "optionType3": "Size",
    "optionName3": "Large",
    "optionValue3": "L"
  },
  {
    "skuid": "SSBLKM",
    "optionType1": "Shirt Type",
    "optionName1": "Sweatshirt",
    "optionValue1": "SS",
    "optionType2": "Color",
    "optionName2": "Black",
    "optionValue2": "BLK",
    "optionType3": "Size",
    "optionName3": "Medium",
    "optionValue3": "M"
  },
  {
    "skuid": "TSWHTXL",             <-- CAN APPEAR OUT OF ORDER (UN-GROUPED WITH OTHER T-SHIRTS)
    "optionType1": "Shirt Type",
    "optionName1": "T-Shirt",
    "optionValue1": "TS",
    "optionType2": "Color",
    "optionName2": "White",
    "optionValue2": "WHT",
    "optionType3": "Size",
    "optionName3": "Extra Large",   <-- THIS SIZE ONLY AVAILABLE FOR T-SHIRT / WHITE
    "optionValue3": "XL"
  },  
  {
    "skuid": "SSBLKL",
    "optionType1": "Shirt Type",
    "optionName1": "Sweatshirt",
    "optionValue1": "SS",
    "optionType2": "Color",
    "optionName2": "Black",
    "optionValue2": "BLK",
    "optionType3": "Size",
    "optionName3": "Large",
    "optionValue3": "L"
  }
]

然后，我可以在UI中显示“衬衫类型”、“颜色”和“尺寸”菜单，并在做出选择时更新每个菜单（基于可用性）

---

如果有人有更好的建模想法的话，那就是我脑海中提出的模型，尽管我还没有嫁给它。我开始编写执行转换的代码，但它很快就变成了意大利面条，所以我想在这里提问。

您可以迭代数据并使用对象作为结果集

在迭代过程中，循环一个选项键计数器，并检查实际对象中是否存在该键。如果没有，则创建一个新对象，并将此对象用于计数器的下一个循环

因此，您将获得一个具有嵌套数组的对象数组

var data=[{skuid:“TSWHTM”，optionType1:“衬衫类型”，optionName1:“T恤”，optionValue1:“TS”，optionType2:“颜色”，optionName2:“白色”，optionValue2:“WHT”，optionName3:“尺寸”，optionType3:“中等”，optionValue3:“M”}，{skuid:“TSWHTL”，optionType1:“衬衫类型”，optionName1:“T恤”，optionValue1:“TS”，optionType2:“颜色”，optionName2:“白色”，optionValue2:“白色”，optionType3:“大小”，optionName3:“大”，optionValue3:“L}，{skuid:“TSBLKM”，optionType1:“衬衫类型”，optionName1:“T恤”，optionValue1:“TS”，optionType2:“颜色”，optionName2:“黑色”，optionValue2:“BLK”，optionType3:“大小”，optionName3:“中等”，optionValue3:“M}，{skuid:“TSBLKL”，选项类型1:“衬衫类型”，选项名称1:“T恤”，选项值1:“TS”，选项类型2:“颜色”，选项名称2:“黑色”，选项值2:“黑色”，选项类型3:“尺寸”，选项名称3:“大型”，选项值3:“L”}，{skuid:“SSWHTM”，选项类型1:“衬衫类型”，选项名称1:“运动衫”，选项值1:“SS”，选项类型2:“颜色”，选项名称2:“白色”，optionValue2:“WHT”，optionType3:“尺寸”，optionValue3:“中等”，optionValue3:“M”}，{skuid:“SSWHTL”，optionType1:“衬衫类型”，OptionName 1:“运动衫”，optionValue1:“SS”，optionType2:“颜色”，optionName2:“白色”，optionValue2:“尺寸”，OptionName 3:“大”，optionValue3:“L”}，{skuid:“SSBLKM”，optionType1:“衬衫类型”，选项名称1:“运动衫”，选项值1:“SS”，选项类型2:“颜色”，选项名称2:“黑色”，选项值2:“黑色”，选项类型3:“尺寸”，选项名称3:“中等”，选项值3:“M”}，{skuid:“TSWHTXL”，选项类型1:“衬衫类型”，选项名称1:“T恤”，选项值1:“TS”，选项类型2:“颜色”，选项名称2:“白色”，选项值2:“WHT”，optionType3:“尺寸”，optionName3:“超大”，optionValue3:“XL”}，{skuid:“SSBLKL”，optionType1:“衬衫类型”，optionName1:“运动衫”，optionValue1:“SS”，optionType2:“颜色”，optionName2:“黑色”，optionValue2:“黑色”，optionType3:“尺寸”，optionName3:“大”，optionValue3:“L”}，
keys=['optionType'、'optionName'、'optionValue']，
结果=数据
.减少（（r，o）=>{
var t=r；
for（设i=1，key='optionValue'+i；输入o；key='optionValue'++i）{
设项=（t.option=t.option | |[]）。查找（q=>q[key]==o[key]）；
if（！item）t.option.push（item=Object.fromEntries（keys.map（k=>[k+i，o[k+i]]）；
t=项目；
}
t、 skuid=o.skuid；
返回r；
}，{选项：[]}）
选项
控制台日志（结果）
作为控制台包装{最大高度：100%！重要；顶部：0；}
哇，神奇！谢谢你，尼娜！
{
  "options": [
    {
      "optionType1": "Shirt Type",
      "optionName1": "T-Shirt",
      "optionValue1": "TS",
      "options": [
        {
          "optionType2": "Color",
          "optionName2": "White",
          "optionValue2": "WHT",
          "options": [
            {
              "optionType3": "Size",
              "optionName3": "Medium",
              "optionValue3": "M",
              "skuid": "TSWHTM"
            },
            {
              "optionType3": "Size",
              "optionName3": "Large",
              "optionValue3": "L",
              "skuid": "TSWHTL"
            },
            {
              "optionType3": "Size",
              "optionName3": "Extra Large",
              "optionValue3": "XL",
              "skuid": "TSWHTXL"
            }
          ]
        },
        {
          "optionType2": "Color",
          "optionName2": "Black",
          "optionValue2": "BLK",
          "options": [
            {
              "optionType3": "Size",
              "optionName3": "Medium",
              "optionValue3": "M",
              "skuid": "TSWHTM"
            },
            {
              "optionType3": "Size",
              "optionName3": "Large",
              "optionValue3": "L",
              "skuid": "TSWHTL"
            }
          ]
        }
      ]
    },
    {
      "optionType1": "Shirt Type",
      "optionName1": "Sweatshirt",
      "optionValue1": "SS",
      "options": [
        {
          "optionType2": "Color",
          "optionName2": "White",
          "optionValue2": "WHT",
          "options": [
            {
              "optionType3": "Size",
              "optionName3": "Medium",
              "optionValue3": "M",
              "skuid": "SSWHTM"
            },
            {
              "optionType3": "Size",
              "optionName3": "Large",
              "optionValue3": "L",
              "skuid": "SSWHTL"
            }
          ]
        },
        {
          "optionType2": "Color",
          "optionName2": "Black",
          "optionValue2": "BLK",
          "options": [
            {
              "optionType3": "Size",
              "optionName3": "Medium",
              "optionValue3": "M",
              "skuid": "SSWHTM"
            },
            {
              "optionType3": "Size",
              "optionName3": "Large",
              "optionValue3": "L",
              "skuid": "SSWHTL"
            }
          ]
        }
      ]
    }
  ]
}