0

I need to make a computed function in Vue 3 that randomly selects an id, and shows all of its contents.

This is the object:

export const data = [
{id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
{id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}]

I suppose that I will need to use .sort, but I'm not sure where to start. I would really appreciate some help!

I am well aware that there are numerous answers to this in JavaScript. However, I would like to know how this is done in a Vue computed property!

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Web Dev
  • 134
  • 11

3 Answers3

2

To select a random element from your data you can do something like this:

function getRandomElement(data) {
  const index = Math.floor(Math.random() * (data.length))
  const randomElement = data[index];
  return randomElement;
}

If you want, you can put all your logic into a computed property, but be aware that it will not provide a different value unless data (considered as a component property) changes.

<script>
export default {
  data() {
    return {
      data: [...]
    }
  },
  computed: {
    randomElement() {
      const index = Math.floor(Math.random() * (this.data.length))
      const randomElement = this.data[index];
      return randomElement;
    }
  }
}
</script>
<template>
  <div>
    <p>Album: {{randomElement.albumname}}</p>
    <p>Artist: {{randomElement. artist}}</p>
    ...
    <ul>
      <li v-for="(song,index) in randomElement.songs" :key="index">
        {{song.song}}
      </li>
    </ul>
  </div>
</template>

To update the random element every time a button is pressed, you can do something like this:

<script>
export default {
  data() {
    return {
      data: [
        {id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
        {id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
        {id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
        {id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
        {id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}
      ],
      randomElement: null
    }
  },
  methods: {
    updateRandomElement() {
      const index = Math.floor(Math.random() * (this.data.length))
      this.randomElement = this.data[index];
    }
  }
}
</script>
<template>
  <div>
    <button @click="updateRandomElement">Update random element</button>
    <div v-if="randomElement">
      <p>Album: {{randomElement.albumname}}</p>
      <p>Artist: {{randomElement. artist}}</p>
      <ul>
        <li v-for="(song,index) in randomElement.songs" :key="index">
          {{song.song}}
        </li>
      </ul>
    </div>
  </div>
</template>
Mr5he11
  • 353
  • 2
  • 8
  • How could I get a different object on button press? – Web Dev Apr 04 '22 at 21:24
  • You should make it a method (and not a computed) and call it every time you press the button. The random element can be saved into a data property. – Mr5he11 Apr 04 '22 at 21:26
  • Sorry it was because `randomElement` was defined as `null` at first and the template tried to read properties of `null`. Now it should work. – Mr5he11 Apr 04 '22 at 21:46
0

Is that works?

const data = [
{id: "1", albumname: "b", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'c', keysavail:[{key: "Am", route2: "/"}]}, { song : 'check2.2' }]},
{id: "2", albumname: "c", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'a' }, { song : 'check2.2' }]},
{id: "3", albumname: "a", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'b' }, { song : 'check2.2' }]},
{id: "4", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "5", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "6", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "7", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "8", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "9", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "10", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "11", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "12", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "13", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "14", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "15", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "16", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]},
{id: "17", albumname: "xx", artist: "xxxx", dateadded: "xxxx", route: "xxxx", songs: [{ song : 'check2.1' }, { song : 'check2.2' }]}]

const getRandom = Math.floor(Math.random() * data.length);
const getObject = data.find( el => getRandom == el.id);
console.log(getObject);
Evren
  • 4,147
  • 1
  • 9
  • 16
-1

You can use a library called toxic, not well known but it has a built in feature for using this.

<script src="https://toxic-js.techdeck.repl.co/toxic.js"></script>

now you can use:

var array = [1, 2, 3];

var random = array.random();

or

var random = [1, 2, 3].random();
fox tech.
  • 65
  • 8