Append as array inside array

Question

I have an object that looks like this, and I can push data using below method. Also I initialize the types data.

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

It works fine.

However, now I want my object to look like this:

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

How can I modify my append function to append the elements like this?

Can you share more about what's the object output?? I don't quite understand what's "a" => [ ... ] and I don't quite know where exactly do you want to push your value in the new output using pushValue — kevguy
– kevguy, Commented Aug 3, 2017 at 17:15
I am getting key and value on a @change on checkboxes. @change, push value is triggeted with key: 1 or 2, value: a,b,c, etc. And I edited obj to myObj for not confusing it with the one within the method — senty
– senty, Commented Aug 3, 2017 at 17:21
So what exactly do you want to store inside "myObj.1.a?? And is there relationship between this.types and myObj? Because I don't see myObj has anything to do with pushValue. — kevguy
– kevguy, Commented Aug 3, 2017 at 17:21
I just want it to be there, even as an empty array. So that I can use it in in v-for and using index, I can understand its count; to be able to use in :name attributes of child component — senty
– senty, Commented Aug 3, 2017 at 17:23
Then what exactly will you push into myObj.1.a then? I mean, what will be pushed into the empty arrays? The numbers 1 or 2, or the keys a, b, c, ...? Because when you execute pushValues, you are modifying this.types, not myObj. Even at this moment I still don't quite know what's the point of myObj. Or you just want to append an array with two empty arrays inside to myObj.1.a?? — kevguy
– kevguy, Commented Aug 3, 2017 at 17:25

kevguy · Accepted Answer · 2017-08-03 18:24:58Z

2

I'm just answering this according my assumption of what @senty is trying to do:

pushValue is a method that takes numbers as keys and characters as values and save them into this.types, and whenever pushValue is called, this.types is gonna have a property key storing an object with value as its key, which stores an array containing an empty array. If That array (the one that contains arrays) already exists, another empty is gonna appended to that array. And eventually this.types will look like myObj

Hence, pushValue should look 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>

edited Aug 3, 2017 at 18:24

answered Aug 3, 2017 at 17:41

kevguy

4,4381 gold badge27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kevguy Over a year ago

@senty please let me know if this is what you want

senty Over a year ago

Thanks a lot! It's really good except one thing. For the else part, in Vue, if you don't use .$set, it changes the value (i can see it in debugger), but it won't create the component on the view or execute any v-for which this variable is used in. Can you please show me how to use $set in the else part, with your approach? (I run this problem for the last 2 days so I am kind of sure that it is it)

kevguy Over a year ago

@senty Just modified the code snippet into using Vue and also Vue.$set, everything should be working now.

Collectives™ on Stack Overflow

Append as array inside array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related