vue data from json at random

Question

I'm writing a little quiz app using vue and tailwind, but it's my 1st time doing anything like this. I want the data to be random, so the quiz looks different each time. I am accessing my json file as follows:

<template>
  <div id="app">
    <ul>
      <li v-for="user in users" :key="user.id">
         {{user.name}}
       </li>
    </ul>
  </div>
</template>

<script>
import usersData from "./users.json";

export default {
  data() {
    return {
      users: usersData,
    };
  },
};
</script>

I was wondering if there is a quick and easy way for this to output random values from the json file. Just to be clear, I want this to still output ALL of the "names" in the json file, but in different order each time. Let me know if I'm not clear or I need to provide more info. Thanks in advance.

Answer 1

You can use loadash

https://lodash.com/docs/4.17.15#shuffle

const array = [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ];
console.log(_.shuffle(array));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

or try it like this.

console.log( [
    { some: 1 },
    { some: 2 },
    { some: 3 },
    { some: 4 },
    { some: 5 },
    { some: 6 },
    { some: 7 },
  ]
  .sort( () => Math.random() - 0.5) );

So make a computed property in vuejs

<template>
  <div id="app">
    <ul>
      <li v-for="user in randomUsers" :key="user.id">
         {{user.name}}
       </li>
    </ul>
  </div>
</template>

<script>
import usersData from "./users.json";

export default {
  data() {
    return {
      users: usersData,
    };
  },
computed:{
  randomUsers () {
    usersData.sort(() => Math.random() - 0.5))
  }
}
};
</script>

Answer 2

To do this, we use the following method

Html/Vue Code

<template>
  <div id="app">
    <ul>
      <li v-for="user in users" :key="user.id">
         {{user.name}}
       </li>
    </ul>
  </div>
</template>

JavaScript Code

        <script>
    import usersData from "./users.json";

    export default {
      data() {
        return {
          users: usersData,
        };
      },
computed:{
   random(p) {
      //try this shuffle function
      for (
        var j, x, i = p.length;
        i;
        j = Math.floor(Math.random() * i), x = p[--i], p[i] = p[j], p[j] = x
      );
      return p;
    }
}
,
created(){
this.users=random(users)
}
    };
    </script>

Answer 3

  <div id="app">
    <ul>
      <li v-for="user in userDataRandomSort" :key="user.id">
         {{user.name}}
       </li>
    </ul>
  </div>
</template>

<script>
import usersData from "./users.json";

export default {
  data() {
    return {
      users: usersData,
    };
  },
  computed :{
      userDataRandomSort(){
          return this.usersData.sort((a, b) => 0.5 - Math.random())
      }
  }
};
</script>

Answer 4

The function has to be evaluated, so it's not a constant and can't be used as such.

What you can use instead is a var.

Constants are defined as:

There are boolean constants, rune constants, integer constants, floating-point constants, complex constants, and string constants. Rune, integer, floating-point, and complex constants are collectively called numeric constants.

Using var:

var str1 = PureFunction(0)
var str1 = PureFunction(4)
var str1 = PureFunction(5)

Answer 5

Constants must be able to be assigned at compile time. The value of a const can not be the result of a runtime calculation. Functions are evaluated in runtime, so can not be used to declare a const.

If you even did something like this where value won't change at all, compiler would still give you an error.