JavaScript add json to existing object

Question

I'm struggling with adding JSON to existing objects with Vue.js. So I have a function that is calculating some variants and it's working well for now, but I would need to change them in order to give correct data to my Laravel backend.

So this is how my array looks like (this array is used to calculate variants)

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

And I'm calculating them like this:

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;
        },

And the output looks like:

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

So this is calculated well, but this variants would need to look like this:

"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"
                }
            ]
        }

As you see I have a title field that is calculated by options.values, but the real question is how to make that JSON look like the last given JSON.

Any ideas on how to do it?

Answer 1

From what I see, the missing values to create the final output are the key properties of the options arrays, which I see in the first attributes array under the text property of the title object.

The first change that you can do is on the creation of the parts variable: instead of returning the attribute.values directly, map over them to save the attribute.title.text as well.

At the same time, we set the keys of the returned object to match the options object from the desired output.

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

The combinations code remains the same.

Then, we loop over the combinations and create the new variants array

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

The final code will look something like this:

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;
}