How to store values from a particular key from an object into an array - Vue

Question

I have to say, I am new to the whole Vue framework. I have created a selectable table. The data selected from this table is stored in an object. This function should run in the back. So, I think I should run it the computed section. My object looks like this. I am trying to retrieve only the ids. This data is stored in the variable selected.

[ { "id": 5, "name": "CD", "box": "A5", "spot": 1 }, { "id": 2, ""name": "DVD", "box": "A2", "spot": 1 } ]

I would like to only retrieve the values from the key id. These values should be stored in an array. The array should be pushed when the submit button is clicked. I will later use this array to store this information in this array into a database.

You can find my code below. I guess I am missing something because it doesn't seem to work. How should I refer to this function that it runs automatically and that the array can be called in my controller to put it into the database? Thanks for the help.

Template

<div class="row">
   <div class="col-2">
      <b-form-input v-model="date" class="form-control" type="date" value="getDate" ></b-form-input>
      <pre class="mt-3 mb-0">{{ date }}</pre>
   </div>
   <div class="col-6">
      <b-form-input v-model="description" placeholder="Enter some text"></b-form-input>
      <pre class="mt-3 mb-0">{{ description }}</pre>
   </div>
   <!-- Submit data to db -->
   <div class="col-4">
      <button class="btn btn-primary custom-button-width" center-block>Request antibody pool</button>
   </div>
</div>

JavaScript

data() {
  return {
    // data from db
    data: this.testerdata,
    // selected is the object where my selected data is stored.
    selected: [],
    // here should my id end up
    selectedids: {},
    description: '',
    date: '',
  }
},
computed: {
  tester() {
    var array = [];
    for (var test in this.selected) {
      if (test == "id") {
        array += this.selected[test];
      }
    }
    console.log(array);
  }
},
methods: {
  storeData: async function() {
    axios.post('/panel', {
      description: this.description,
      date: this.date,
      selectedids: this.tester(selectedids)
    }).then(function(response) {
      console.log(response);
    }).catch(function(error) {
      console.log(error);
    }).finally(function() {
      // always executed
    });
  },
}

Dan · Accepted Answer · 2019-05-17 11:56:43Z

2

The problem is with this line:

array += this.selected[test];

This the way to add an item to an array:

array.push(this.selected[test]);

Additionally, you are trying to loop over properties of this.selected, but it is an array which contains objects and has no properties. Instead, you want to loop over each object item in the array and push the id property.

And, since this.selected is an array, not an object, you should not use a for...in loop-- which is for objects-- because the order will not be guaranteed. You can read more about that in the MDN for...in docs.

You could use a normal for loop or the array's forEach loop. I'll show the forEach:

this.selected.forEach(obj => {
    array.push(obj.id);
});

edited May 17, 2019 at 11:56

answered May 17, 2019 at 10:10

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

2 Comments

ageans Over a year ago

Selected is where my data is stored when something a row in my table is selected. So, selected is the object that holds my data. Is there something wrong with my loop? Should I also show the code of how I push my data into the object? Thanks for the help.

Dan Over a year ago

Ok, so selected, an array, holds multiple objects. I will edit my answer to show how your loop should look and explain why not to use for...in.

Pranav Kale · Accepted Answer · 2019-05-17 10:19:44Z

1

I understand that you might be looking for vanilla Javascript answer here. However a lot of code can be saved if you can use RamdaJS library to solve such issues.

It has an excellent set of functions like pluck, which will do the same thing in 1 line.

let array = R.pluck('id')(this.selected);

answered May 17, 2019 at 10:19

Pranav Kale

6391 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to store values from a particular key from an object into an array - Vue

Template

JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Template

JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related