Преобразование массива опций в массив опций с использованием Javascript - PullRequest
Новая
       6

Преобразование массива опций в массив опций с использованием Javascript

1 голос
/ 20 марта 2020

Я играю с созданием панели электронной коммерции. Часть информационной панели предназначена для того, чтобы пользователь мог создавать варианты продукта. Итак, я так думаю: 

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

Как вы можете себе представить, пользователь может добавить дополнительный вес, если он будет sh, так что может выглядеть так: 

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

Проблема, с которой я сталкиваюсь, заключается в преобразовании массива параметров в массив вариантов. Может кто-нибудь помочь, пожалуйста?

1 Ответ

1 голос
/ 20 марта 2020

1) сначала создайте возможную комбинацию sets, пройдя через опции.
2) сборка idObj с ключами в качестве значений _id.
3) Go сверх возможного sets с шага 1 и построить каждый объект в необходимой форме. 

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));
...