Extract the property value and save it as an array in Vue

Question

Extract the property value and save it as an array in Vue

Looking to extract all values of a specific property and save them as an array. I attempted the following method:

data() {
    return {
       roomList: null
    }
},
methods: {
     getRooms() {
        var that = this
        axios.get('http://localhost:3000/roomList')
              .then(function(response) {
                that.roomList = response.data
            })
        let roomLists = that.roomList.map(i => i.name) //extracting property values
        return roomLists;
    },

},
mounted: function () {
        this.getRooms()
},

I suspect I may have misplaced the map function. I tried placing it inside the data section but encountered issues. I'm struggling to determine the appropriate location for this function. Any guidance or assistance would be greatly appreciated. Thank you.

javascript vue.js axios

Answer 1

Answer №1

To effectively manage the data, I recommend storing the entire roomsList data in your component's data property and creating a computed property to extract only the names that will be kept synchronized with the original data.

Make sure to initialize the roomsList as an empty array.

export default {
  data: () => ({ roomsList: [] }),
  computed: {
    roomNames: ({ roomsList }) => roomsList.map(({ name }) => name)
  },
  methods: {
    async getRooms () {
      const { data } = await axios.get('http://localhost:3000/roomList');
      this.roomsList = data;
    }
  },
  mounted () {
    this.getRooms()
  },
};

Your template would then have a structure like the following example:

<ul>
  <li v-for="roomName in roomNames">{{ roomName }}</li>
</ul>

Answer 2

To effectively manage the data, I recommend storing the entire roomsList data in your component's data property and creating a computed property to extract only the names that will be kept synchronized with the original data.

Make sure to initialize the roomsList as an empty array.

export default {
  data: () => ({ roomsList: [] }),
  computed: {
    roomNames: ({ roomsList }) => roomsList.map(({ name }) => name)
  },
  methods: {
    async getRooms () {
      const { data } = await axios.get('http://localhost:3000/roomList');
      this.roomsList = data;
    }
  },
  mounted () {
    this.getRooms()
  },
};

Your template would then have a structure like the following example:

<ul>
  <li v-for="roomName in roomNames">{{ roomName }}</li>
</ul>

Answer 3

Answer №2

If I have grasped your message correctly, please refer to the code snippet below:

const app = new Vue({
  el: "#app",
  data() {
    return {
       itemList: null
    }
  },
  computed: {
    itemLists() {
      return this.itemList?.map(item => item.name)
    }
  },
  methods: {
     getItems() {
       axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((response) => {
          this.itemList = response.data
      })
    },
  },
  mounted() {
    this.getItems()
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha256-7ixQw+mUpRYg3Dqa3ClWUKzJWKIFF1jTdyZ+NVcyW54=" crossorigin="anonymous"></script>
<div id="app">
  {{itemLists}}
</div>

Answer 4

If I have grasped your message correctly, please refer to the code snippet below:

const app = new Vue({
  el: "#app",
  data() {
    return {
       itemList: null
    }
  },
  computed: {
    itemLists() {
      return this.itemList?.map(item => item.name)
    }
  },
  methods: {
     getItems() {
       axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((response) => {
          this.itemList = response.data
      })
    },
  },
  mounted() {
    this.getItems()
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha256-7ixQw+mUpRYg3Dqa3ClWUKzJWKIFF1jTdyZ+NVcyW54=" crossorigin="anonymous"></script>
<div id="app">
  {{itemLists}}
</div>

Extract the property value and save it as an array in Vue

Answer №1

Answer №2

Similar questions

Embed schema information into HTML tags using JavaScript

Transforming into a serialized division

Issues with v-on:change not triggering method in nuxt.js

The JavaScript Autocomplete feature fails to clear suggestions when there is no user input detected

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Using AngularJS to transfer data from a datepicker to an ng-model

Suggestions to reduce our website loading time

Sinon - using callbacks in stubbed functions leading to test method exceeding time limit

I am looking to include both the type and maxLength attributes in a MUI TextField

Layer one image on top of another using z-index

The json_encode() function yields an empty result

"Eliminate the headers of columns within the collapsible rows on the ui-grid interface

The functionality of selecting all items in v-select does not result in saving all of them

Embedding a YouTube video in an iframe triggers numerous cautionary notifications in the Chrome browser

Is there a way to convert a button into clickable text that performs the same function as the original button?

Encountering a problem sending an array of objects to a controller via jQuery AJAX

What could be causing a template value in my AngularJS/Ionic Framework code to not be replaced properly?

How do I return a <div> element to its initial state after JavaScript has made changes to it?

I am trying to showcase a collection of images on my homepage, but unfortunately, it is not functioning as expected

AngularJS: Component fails to load controller