Add array as an element within another array

Question

Add array as an element within another array

After initializing the data, I have an object structured like this and I am able to push data using the method below:

myObj = {
    1: ["a", "b", "c"],
    2: ["c", "d", "e"],
}

data: {
   types: {}
},

methods: {

  pushValue(key, value) {
      var obj = this.types

      if (obj.hasOwnProperty(key)) {
          var idx = $.inArray(value, obj[key]);
          if (idx == -1) {
             obj[key].push([value]);
          }
      } else {
          this.$set(obj, key, [value]);
      }
  },
}

This current structure functions properly.

However, now I aim for my object to be in this format:

myObj = {
    1: {
        "a": [
           [],[]
        ], 
        "b": [
           [],[]
        ],
       }
 }

I need guidance on how to modify my append function to achieve this new structure.

javascript arrays multidimensional-array vue.js vuejs2

Answer 1

Answer №1

My interpretation of @senty's goal leads me to explain the functionality as follows:

The method pushValue is designed to accept numbers as keys and characters as values, saving them into this.types. When pushValue is invoked, this.types will create a property with the key storing an object where the value serves as its key, containing an array that may append additional empty arrays if necessary. Ultimately, this.types will resemble myObj.

Thus, the implementation of pushValue should be structured like this:

const app = new Vue({
  el: '#app',
  data: {
    types: {}
  },
  methods: {
    pushValue(key, value) {
      if (this.types.hasOwnProperty(key)) {
        if (this.types[key].hasOwnProperty(value)) {
          const orgValue = this.types[key][value];
          orgValue.push([]);
          this.$set(this.types[key], value, orgValue);
        } else {
          this.$set(this.types[key], value, [[]]);
        }
      } else {
        this.$set(this.types, key, {
          [value]: [ [] ]
        });
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div>
    <p>pushValue(key, value)</p>
    <button v-on:click="pushValue(1, 'a')">(1, 'a')</button>
    <button v-on:click="pushValue(1, 'b')">(1, 'b')</button>
    <button v-on:click="pushValue(1, 'c')">(1, 'c')</button>
    <button v-on:click="pushValue(2, 'a')">(2, 'a')</button>
    <button v-on:click="pushValue(2, 'b')">(2, 'b')</button>
    <button v-on:click="pushValue(2, 'c')">(2, 'c')</button>
  </div>
  <div>{{ types }}</div>  
</div>

Answer 2

My interpretation of @senty's goal leads me to explain the functionality as follows:

The method pushValue is designed to accept numbers as keys and characters as values, saving them into this.types. When pushValue is invoked, this.types will create a property with the key storing an object where the value serves as its key, containing an array that may append additional empty arrays if necessary. Ultimately, this.types will resemble myObj.

Thus, the implementation of pushValue should be structured like this:

const app = new Vue({
  el: '#app',
  data: {
    types: {}
  },
  methods: {
    pushValue(key, value) {
      if (this.types.hasOwnProperty(key)) {
        if (this.types[key].hasOwnProperty(value)) {
          const orgValue = this.types[key][value];
          orgValue.push([]);
          this.$set(this.types[key], value, orgValue);
        } else {
          this.$set(this.types[key], value, [[]]);
        }
      } else {
        this.$set(this.types, key, {
          [value]: [ [] ]
        });
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div>
    <p>pushValue(key, value)</p>
    <button v-on:click="pushValue(1, 'a')">(1, 'a')</button>
    <button v-on:click="pushValue(1, 'b')">(1, 'b')</button>
    <button v-on:click="pushValue(1, 'c')">(1, 'c')</button>
    <button v-on:click="pushValue(2, 'a')">(2, 'a')</button>
    <button v-on:click="pushValue(2, 'b')">(2, 'b')</button>
    <button v-on:click="pushValue(2, 'c')">(2, 'c')</button>
  </div>
  <div>{{ types }}</div>  
</div>

Add array as an element within another array

Answer №1

Similar questions

The asynchronous AJAX request is finished after the function call has been made. This can be achieved without using

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

Send the Vue component as an argument to the function

Ways to terminate and fulfill a promise

Include backing for the trial syntax 'classProperties' within an npm module

Loop through a nested array and output the playerId, playerName, and playerCategory for each player

Leverage the power of jQuery datetime picker in an ASP.NET content page with a repeater control

"Unexpected outcome: Angular's HTTP request for a JSON file yields an undefined

Angular UI Bootstrap Typeahead - Apply a class when the element is added to the document body

Encountering a SyntaxError with the message 'Unexpected token' while trying to require a module in strict mode from JSON at position 0

What does ngModel look like without the use of square brackets and parenthesis?

"ModuleNotFound" error occurred when attempting to utilize Netlify lambda functions with external dependencies

Passing a variable from a service to a controller in AngularJS

Need Root Directories in Browserify and Using NPM (eliminating the constant use of '../../../..' in both cases)

What is the best way to display the HTML content being received from the database in the DOM?

Creating a JSONArray in C# and transmitting the data to an Android application can be achieved using a few simple

How can a Vuejs front-end web application coexist on the same host/domain as my server?

Interactive Notification System with MySQL, AJAX, and PHP

What is the correct way to insert a new key-value pair into an object within the state of functional components?

Using JavaScript to toggle the iron-collapse property