Adding JSON to an existing object in JavaScript involves using the `JSON

Question

Adding JSON to an existing object in JavaScript involves using the `JSON

I'm facing a challenge with integrating JSON into existing objects using Vue.js. Currently, I have a function that calculates variants successfully, but I need to modify them to ensure accurate data is sent to my Laravel backend.

Here is what my array looks like (used for variant calculation):

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

And this is how the calculation is done:

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

The current output:

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

However, I need the variants to be structured as follows:

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

The title field needs to be calculated based on options.values. How can I transform the JSON structure to match the desired format?

Any suggestions on accomplishing this? Thanks in advance!

javascript vue.js

Answer 1

Answer №1

After a thorough examination, it appears that the missing elements needed to generate the final result are the key attributes within the options arrays, specifically located in the initial attributes array under the text attribute of the title object.

To address this issue, the initial modification involves adjusting the creation process of the parts variable: instead of directly returning the attribute.values, the values are now mapped over to retain the associated attribute.title.text.

In parallel, the keys for the resulting object are aligned with the structure of the options object in the desired output.

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

The logic pertaining to the combinations remains unchanged.

Subsequently, an iteration process is conducted on the combinations to formulate the new array named variants.

let variants = [];

for (const combination of combinations) {
  variants.push({
    // Utilize template strings for constructing the new title
    title: `${combination[0].value}/${combination[1].value}`,
    slug: "...desired value",
    // The variable 'combination' already adheres to the structure required for 'options'
    options: combination
  });
}

The eventual implementation will exhibit a configuration resembling the following:

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: "...desired value",
      options: combination,
    });
  }

  this.variants = variants;
}

Answer 2

After a thorough examination, it appears that the missing elements needed to generate the final result are the key attributes within the options arrays, specifically located in the initial attributes array under the text attribute of the title object.

To address this issue, the initial modification involves adjusting the creation process of the parts variable: instead of directly returning the attribute.values, the values are now mapped over to retain the associated attribute.title.text.

In parallel, the keys for the resulting object are aligned with the structure of the options object in the desired output.

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

The logic pertaining to the combinations remains unchanged.

Subsequently, an iteration process is conducted on the combinations to formulate the new array named variants.

let variants = [];

for (const combination of combinations) {
  variants.push({
    // Utilize template strings for constructing the new title
    title: `${combination[0].value}/${combination[1].value}`,
    slug: "...desired value",
    // The variable 'combination' already adheres to the structure required for 'options'
    options: combination
  });
}

The eventual implementation will exhibit a configuration resembling the following:

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: "...desired value",
      options: combination,
    });
  }

  this.variants = variants;
}

Adding JSON to an existing object in JavaScript involves using the `JSON

Answer №1

Similar questions

Adding a file filter in Kendo v2016 is a simple process that can greatly enhance

Unit testing Angular SVG to retrieve the SVGLengthList

Creating a personalized <select> filter in Angular.js with two different JSON choices

Modifying a property name in a JSON object for each descendant element in a recursive manner

What is causing the TypeError in Discord.js when trying to read the 'voice' property? Any help troubleshooting this issue would be greatly appreciated

Creating an array to store multiple ID values within a variable

I am attempting to display films within a watchlist module, however it is not allowing me to do so

Sharing data between Vue components

Trouble arises with MySQL query in PHP/jQuery setup

Jquery validation is ineffective when it fails to validate

Tips for animating a nested array using jQuery

How to pass a PHP variable to JavaScript and ensure that the echo statement reflects any changes in the PHP variable

Error encountered when attempting to initiate a second screenshare on Chrome due to an invalid state

Dynamic color updates for Angular list items on click

Contrast between a pair of methods for submitting a request in an Express application

Converting a JSON array into a table using AngularJS

Can you tell me how to display the currently utilized Node.js version and path within npm?

Finding the Right Path: Unraveling the Ember Way

Rotation snapping feature 'control.setRotationSnap' in TransformControls.js (Three.js) is not functioning properly

Navigate to the most recent entry in the array while using ng-repeat