1

I have a Vue JS project that displays random elements in a modal when the user clicks on a button. It currently displays random elements but I have noticed that it repeats entries as opposed to going through the elements randomly and NOT repeating them.

How would I go about making sure it doesn't repeat entries until it has randomly gone through them all?

Here is what I have so far, the getPlace() method is where the random element code is:

export default {
  name: 'home-page',
  components: {BaseLayout},
  data () {
    return {
      peopleData: {},
      modalShow: false
    }
  },
  methods: {
    getPlace: function () {
      let keys = Object.keys(peoplesDataJson)
      let random = Math.floor(Math.random() * keys.length)
      this.placeData = peoplesDataJson[keys[random]]
    }
  }
}

My Json data looks like:

{
  "1": {
    "personID": 1,
    "person": "Person 1"
  },
  "2": {
    "personID": 2,
    "person": "Person 2"
  },
  "3": {
    "personID": 3,
    "person": "Person 3"
  }
}

I am not generating random numbers so the answers from these questions don't really help in my opinion and I don't understand what I need to change in my code to apply the logic:

Generating non-repeating random numbers in JS

How to randomly generate numbers without repetition in javascript?

Neelam Khan
  • 1,078
  • 8
  • 24
  • Answer can be found https://stackoverflow.com/a/54075680/5779818 using reduce funciton – Joshua Poling Aug 15 '19 at 14:12
  • The duplicates are about getting a random item from the array without repetition. Either by using generators or splicing the array when an item is picked. In your case the array would be `Object.keys()`. [This one for example](https://stackoverflow.com/a/17891411/3082296) – adiga Aug 15 '19 at 17:53

0 Answers0