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>

Where do you consume the condensed options or what is the planed purpose for getNames? Asking because Vue.js might have a simpler solution to achieve rendering, filtering, templating, etc. (usually you keep original data in model and use what you need in the view (benefit and strength of MVC / MVVM). — hc_dev
– hc_dev, Commented Feb 2, 2022 at 23:12
Although requiring "but I don't want the ID in it at all", you accepted an answer which has the ID property remapped asid: option.option. Please clarify your question (give an example of wanted output). — hc_dev
– hc_dev, Commented Feb 3, 2022 at 6:14

Rotiken Gisa · Accepted Answer · 2022-02-03 06:29:51Z

1

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 { 
          option: 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>

edited Feb 3, 2022 at 6:29

answered Feb 2, 2022 at 21:53

Rotiken Gisa

4203 silver badges12 bronze badges

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

Comments

Nikola Pavicevic · Accepted Answer · 2022-02-02 21:30:26Z

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>

answered Feb 2, 2022 at 21:30

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Comments

hc_dev · Accepted Answer · 2022-02-02 23:17:32Z

1

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):

map: to transform each source element to the new target format; returns a new array
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

edited Feb 2, 2022 at 23:17

answered Feb 2, 2022 at 23:02

hc_dev

9,6941 gold badge30 silver badges47 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related