[Vuejs]-What is the best way to copy only certain values from every object in array into another array?

by

0👍

✅

If proposals is an object then do this:

const result = Object.keys(this.proposals).map((key) => ({
    value: this.proposals[key].id,
    text: this.proposals[key].proposal
}))

If proposals is an array

   const result = this.proposals.map((currentProposal) => ({
        value: currentProposal.id,
        text: currentProposal.proposal
    }))

0👍

You could create a pick function to pick only the desired properties from an object, passing the required mapping from the existing object(s) to the new one(s). We can use Object.entries, then filter and Object.fromEntries to do this.

For example: 

    let a = [{ 
        id: 1,
        msg: 'Some msg 1',
        data: 'Some data'
    },
    { 
        id: 2,
        msg: 'Some msg 2',
        data: 'Some data'
    },
    { 
        id: 3,
        msg: 'Some msg 3',
        data: 'Some data'
    },
]

function pick(obj, propertyMapping) {
    return Object.fromEntries(Object.entries(obj).reduce((acc, [key, value]) => {
      if (propertyMapping[key]) { 
        acc.push([propertyMapping[key], value]);
      }
      return acc
  } , []));
}

console.log(a.map((el) => pick(el, { id: "value", msg: "text" } )));

0👍

This will do the work:

this.proposals = this.proposals.map(el => {
    return {value:el.id, text: el.msg}
});

You can see here the documentation of Array.map function.

0👍

Instead of mapping to a new array, you could also use your existing array.
b-select allows you to write b-select-option inside its tags which will be used as options.
So you can create a v-for with your existing array and add the id as value and msg as the text inside b-select-option.

If you need the whole object when selecting a value, you can also pass that into the value property and the v-model of the select will return the entire object.

new Vue({
  el: '#app',
  data() {
    return {
      selected: null,
      selected2: null,
      messages: [
        { id: 1, msg: 'This is message 1', user: 'Hiws' },
        { id: 2, msg: 'This is message 2', user: 'Hiws' },
        { id: 3, msg: 'This is message 3', user: 'Hiws' }
      ]
    }
  }
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<div id="app">
  <!-- Example 1 -->
  <h3>v-model is the only the id</h3>
  <b-select v-model="selected" class="mb-3">
    <b-select-option v-for="{ id, msg } in messages" :key="id" :value="id">
    	{{ msg }}
    </b-select-option>
  </b-select>
  Selected value: {{ selected }}
  
  <hr />

  <!-- Example 2 -->
  <h3>v-model is the entire object</h3>
  <b-select v-model="selected2" class="mb-3">
    <b-select-option v-for="message in messages" :key="message.id" :value="message">
    	{{ message.msg }}
    </b-select-option>
  </b-select>
  Selected value: {{ selected2 }}
</div>

Leave a comment