使用对象数组动态生成新数组 [英] Use object array to generate a new array dynamically

问题描述

我有一个产品表格，我希望用户添加此产品的变体.我的主要设置对象

I have a product form which I would like users to add variants of this product to. My object for the main settings

{
  title: 'Bike',
  settings: {
    options: [
      {
        title: 'Size',
        values: ['60cm', '80cm', '120cm']
      },
      {
        title: 'Color',
        values: ['White', 'Black', 'Red']
      }
    ],
    variants: []
  }
};

因此，对于每个选项，我需要一个带有每个标题及其值的变体-它将重新生成并传递回上述.settings.variants.

So for each option, I need a variant with each title and it's value - which will be regenerated and passed back to the .settings.variants above.

我创建了一个Stackblitz https://stackblitz.com/edit/angular-pi27mf

I have created a Stackblitz https://stackblitz.com/edit/angular-pi27mf

在这种方法中，我需要生成一个全新的变体[]，现在我只了解如何生成类似的东西

In this method I need to generate a brand new variants[], right now I only understand how to generate something like

{Size: "60cm", Color: "White", Image: "img.png"},
{Size: "60cm", Color: "Black", Image: "img.png"},
{Size: "60cm", Color: "Red", Image: "img.png"},

仅通过一个选项循环即可..但是我如何循环所有选项并为每个可能的值创建一个新的变体?

By just looping through one of the options.. but how can I loop though all options and create a new variant for each possible value?

我需要实现的模型就是这个

The model I would need to achieve would be this

{Size: "60cm", Color: "White", Image: "img.png"},
{Size: "60cm", Color: "Black", Image: "img.png"},
{Size: "60cm", Color: "Red", Image: "img.png"},
{Size: "80cm", Color: "White", Image: "img.png"},
{Size: "80cm", Color: "Black", Image: "img.png"},
{Size: "80cm", Color: "Red", Image: "img.png"},
{Size: "120cm", Color: "White", Image: "img.png"},
{Size: "120cm", Color: "Black", Image: "img.png"},
{Size: "120cm", Color: "Red", Image: "img.png"},

请记住，Size和Color是动态的，并且可以由用户更改，因此该功能不仅取决于选项的数量/类型.

Keeping in mind that Size and Color are dynamic and could be changed by the user, so the function can't just depend on this amount/type of options.

我确定需要进行一些数组数学运算，但是如果有人可以将我指向正确的方向或为我重新创建堆栈闪电，那将是巨大的帮助.

I am sure there is some array math that needs to be going on but if someone could point me in the right direction or re-create a stackblitz for me it would be a massive help.

推荐答案

您可以从数据中获取键和值，从值生成笛卡尔乘积，并创建键/值对作为结果.

You could take the keys and values from data, generate the cartesian product from values and create key/value pairs as result.

var data = { title: 'Bike', settings: { options: [{ title: 'Size', values: ['60cm', '80cm', '120cm'] }, { title: 'Color', values: ['White', 'Black', 'Red'] }], variants: [] } },
    keys = data.settings.options.map(({ title }) => title).concat('Image'),
    values = data.settings.options.map(({ values }) => values).concat([['img.png']]),
    cartesian = values
        .reduce((a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []))
        .map(a => Object.assign({ title: a.slice(0, -1).join('/') }, ...keys.map((k, i) => ({ [k]: a[i] }))));

console.log(cartesian);

.as-console-wrapper { max-height: 100% !important; top: 0; }

这篇关于使用对象数组动态生成新数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！