Generate random word form one string value in data nuxt js

Question

I need help. In my project (Vue Nuxtjs) I am fetching some random word which generate in my backend Laravel application through api response. I have to Generate random multiple word form one string value in data which I get from my axios route.

this is my data property.

data() {
    return {
        playWord: [],
        results: [],
    }
},

Response enter image description here

And Axios

  async fetch() {
    const {
        data
    } = await this.$axios.get(`words/${this.$route.params.play}/play`);
    this.playWord = data.word

},

I have been trying with Mounted , which give me only one random value.

 mounted() {
    console.log(this.$route.params.play);

    var characters = 'watermelon';
    var result = ""
    var charactersLength = characters.length;

    for (var i = 0; i < 7; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return this.results = result

    console.log(result)

},

And method

    methods: {
    ply() {
        var characters = 'watermelon';
        var result = ""
        var charactersLength = characters.length;

        for (var i = 0; i < i; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return this.result = ply
    },

},

How can I execute my required

I'm not sure to fully understand. Could you please show us an answer of what you do have right now and what you would like to have at the end? — kissu, Apr 17 '22 at 18:33
I have a string value from data . I want to generate multiple value from one string value. like "orange", and generate multiple like "ornage", "oregn", "anorge". — Tanvir Hasan Emon, Apr 17 '22 at 19:02
What would be the conditions? Same length at the end? Moving letters only (one or any) or duplicating them too? How much variants do you want at the end? Unique duplicates? Do you want only some variants or all the possible ones? — kissu, Apr 17 '22 at 19:05
I want Same length & moving letters (any) only., some variants ( mostly 4) — Tanvir Hasan Emon, Apr 17 '22 at 19:07
i need multiple value from one string value. like "orange", and generate multiple like "ornage", "oregn", "ograne" . like fist two & last one character will be same it will change only others character & need one original value — Tanvir Hasan Emon, Apr 18 '22 at 18:33
This is probably better suited into another question. Could you create one and list what you would expect as an **input** and as an **output** please? — kissu, Apr 18 '22 at 18:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/244002/discussion-between-tanvir-hasan-emon-and-kissu). — Tanvir Hasan Emon, Apr 18 '22 at 18:49

kissu · Accepted Answer · 2022-04-17T19:25:28.817

This will give you 30 variants (or less, depending of the random) of a single baseWord

<template>
  <div>
    <pre>total words: {{ result.length }}</pre>
    <pre>actual list: {{ result }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseWord: 'orange',
      result: [],
    }
  },
  mounted() {
    const randomVariants = [...Array(30)].map(() =>
      this.baseWord
        .split('')
        .sort(() => 0.5 - Math.random())
        .join('')
    )
    const variantsWithoutInitialWord = randomVariants.filter(
      (word) => word !== this.baseWord // removes 'orange' if present
    )
    this.result = [...new Set(variantsWithoutInitialWord)] // removing duplicates
  },
}
</script>

Like this

One thing to keep in mind is to not use a random which is available on both server and client and insert it into the DOM, otherwise you will get a DOM missmatch.

Generate random word form one string value in data nuxt js

1 Answers1