How can I remove a property from an object in an array?

Question

I have an array in my Vue component that I'm trying to parse out in a method, but I don't want the ID in it at all. I want the array to be the same as it is currently but only show the option index, not the id.

Is there a way, within the method, that I can pop the ID index out of the array entirely?

 var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options; console.log(names); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>

Answer 1

You can use map method:

 var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options.map(o => o.option); console.log(names); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>

Answer 2

You can loop through the array and create another array

 var vm = new Vue({ el: "#app", data: { options: [ {id:100, option:"1 - John Doe"}, {id:200, option:"2 - Jane Doe"} ] }, methods: { getNames(){ let names = this.options.map(option => { return { id: option.option } }); console.log(names); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="getNames()">TEST</button> </div>

Answer 3

This is a pure JavaScript task. It is solvable independently from VueJS or any other framework.

In general you can apply two approaches (either keep what is needed or remove what is obsolete):

1. map : to transform each source element to the new target format; returns a new array
2. forEach with delete : to remove the unwanted property from the original array

let options: [
  {id:100, option:"1 - John Doe"},
  {id:200, option:"2 - Jane Doe"}
];

// to get a new (simple) array of strings
let strings = options.map(o => o.option);
console.log(strings);

// to get the same array with nested objects where property was removed
options.forEach(o => delete o.id);
console.log(options);

See also: Remove property for all objects in array