title: JavaScript add json to existing object
body: <p>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.</p>
  <p>So this is how my array looks like (this array is used to calculate variants)</p>
  <pre><code>&quot;attributes&quot;:[
        {
           &quot;title&quot;:{
              &quot;text&quot;:&quot;Size&quot;,
              &quot;value&quot;:&quot;1&quot;
           },
           &quot;values&quot;:[
              &quot;Red&quot;,
              &quot;Green&quot;
           ]
        },
        {
           &quot;title&quot;:{
              &quot;text&quot;:&quot;Color&quot;,
              &quot;value&quot;:&quot;2&quot;
           },
           &quot;values&quot;:[
              &quot;X&quot;,
              &quot;M&quot;
           ]
        }
     ]
  </code></pre>
  <p>And I'm calculating them like this:</p>
  <pre><code>addVariant: function () {
              const parts = this.form.attributes.map(attribute =&gt; attribute.values);
              const combinations = parts.reduce((a, b) =&gt; a.reduce((r, v) =&gt; r.concat(b.map(w =&gt; [].concat(v, w))), []));
              
              this.form.variants = combinations;
          },
  </code></pre>
  <p>And the output looks like:</p>
  <pre><code>&quot;variants&quot;:[
        [
           &quot;Red&quot;,
           &quot;X&quot;
        ],
        [
           &quot;Red&quot;,
           &quot;M&quot;
        ],
        [
           &quot;Green&quot;,
           &quot;X&quot;
        ],
        [
           &quot;Green&quot;,
           &quot;M&quot;
        ]
     ]
  </code></pre>
  <p>So this is calculated well, but this variants would need to look like this:</p>
  <pre><code>&quot;variants&quot;:[
          {
              &quot;title&quot;: &quot;Red/M&quot;,
              &quot;slug&quot;: &quot;prooooo&quot;,
              &quot;options&quot;: [
                  {
                      &quot;key&quot;: &quot;Color&quot;,
                      &quot;value&quot;: &quot;Red&quot;
                  },
                  {
                      &quot;key&quot;: &quot;Size&quot;,
                      &quot;value&quot;: &quot;M&quot;
                  }
              ]
          },
          {
              &quot;title&quot;: &quot;Red/X&quot;,
              &quot;slug&quot;: &quot;prooooo&quot;,
              &quot;options&quot;: [
                  {
                      &quot;key&quot;: &quot;Color&quot;,
                      &quot;value&quot;: &quot;Red&quot;
                  },
                  {
                      &quot;key&quot;: &quot;Size&quot;,
                      &quot;value&quot;: &quot;X&quot;
                  }
              ]
          }
  </code></pre>
  <p>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.</p>
  <p>Any ideas on how to do it?</p>