JavaScript 将 json 添加到现有 object

Question

我正在努力使用 Vue.js 将 JSON 添加到现有对象。 所以我有一个 function 正在计算一些变体并且它现在运行良好，但我需要更改它们以便为我的 Laravel 后端提供正确的数据。

所以这就是我的数组的样子（这个数组用于计算变量）

"attributes":[
      {
         "title":{
            "text":"Size",
            "value":"1"
         },
         "values":[
            "Red",
            "Green"
         ]
      },
      {
         "title":{
            "text":"Color",
            "value":"2"
         },
         "values":[
            "X",
            "M"
         ]
      }
   ]

我正在这样计算它们：

addVariant: function () {
            const parts = this.form.attributes.map(attribute => attribute.values);
            const combinations = parts.reduce((a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []));
            
            this.form.variants = combinations;
        },

output 看起来像：

"variants":[
      [
         "Red",
         "X"
      ],
      [
         "Red",
         "M"
      ],
      [
         "Green",
         "X"
      ],
      [
         "Green",
         "M"
      ]
   ]

所以这计算得很好，但这个变体需要看起来像这样：

"variants":[
        {
            "title": "Red/M",
            "slug": "prooooo",
            "options": [
                {
                    "key": "Color",
                    "value": "Red"
                },
                {
                    "key": "Size",
                    "value": "M"
                }
            ]
        },
        {
            "title": "Red/X",
            "slug": "prooooo",
            "options": [
                {
                    "key": "Color",
                    "value": "Red"
                },
                {
                    "key": "Size",
                    "value": "X"
                }
            ]
        }

如您所见，我有一个由 options.values 计算的标题字段，但真正的问题是如何使 JSON 看起来像最后给出的 JSON。

关于如何做的任何想法？

Answer 1

据我所见，创建最终 output 的缺失值是options arrays 的key属性，我在title ZA8CFDE6331BD59EB2AC96F8911C4B6666 的text属性下的第一个attributes数组中看到。

您可以做的第一个更改是创建parts变量：不是直接返回attribute.values ，而是通过map来保存attribute.title.text 。

同时，我们将返回的 object 的键设置为匹配所需 output 中的options object。

const parts = this.form.attributes.map((attribute) =>
  attribute.values.map((value) => {
    // `options` objects have `value` and `key` properties
    return { value, key: attribute.title.text };
  })
);

combinations代码保持不变。

然后，我们循环combinations并创建新的variants数组

let variants = [];

for (const combination of combinations) {
  variants.push({
    // use template strings to create the new title
    title: `${combination[0].value}/${combination[1].value}`,
    slug: "...the value that you want",
    // the "combination" variable already has the structure that you want for "options"
    options: combination
  });
}

最终代码将如下所示：

addVariant: function () {
  const parts = this.form.attributes.map((attribute) =>
    attribute.values.map((value) => {
      return { value, key: attribute.title.text };
    })
  );

  const combinations = parts.reduce((a, b) =>
    a.reduce((r, v) => r.concat(b.map((w) => [].concat(v, w))), [])
  );

  let variants = [];

  for (const combination of combinations) {
    variants.push({
      title: `${combination[0].value}/${combination[1].value}`,
      slug: "...the value that you want",
      options: combination,
    });
  }

  this.variants = variants;
}