Fetching Information Randomly From JSON Using Node, Nuxt, Express

[
  {
    "word": "lysis",
    "type": "noun",
    "meaning": "The resolution or favorable termination of a disease, coming on gradually and not marked by abrupt change."
  },
  {
    "word": "outwit",
    "type": "verb",
    "meaning": "To surpass in wisdom, esp. in cunning; to defeat or overreach by superior craft."
  },
  {
    "word": "completive",
    "type": "adjective",
    "meaning": "Making complete."
  }
]

const path = require('path');
const express = require('express');
const cors = require('cors');
const fs = require('fs');
const app = express();
const PORT = 3001;

app.use(cors());

let words = JSON.parse(fs.readFileSync('static/words.json', 'utf-8'));

words = words.map(w => ({
  ...w,
  type: w.type ? w.type.trim().toLowerCase() : ''
}));


app.get('/api/types', (req, res) => {
  const uniqueTypes = [...new Set(words.map(w => w.type))].sort();
  res.json(uniqueTypes);
});

//Random word generator with filters
app.get('/api/random', (req, res) => {
  let filtered = [...words];
  const { type, start, end, op, len, count } = req.query;

  const requestedType = type ? type.trim().toLowerCase() : '';
  const startLetter = start ? start.trim().toLowerCase() : '';
  const endLetter = end ? end.trim().toLowerCase() : '';
  const wordLength = len ? parseInt(len) : null;
  const limit = parseInt(count) || 5;

  if (startLetter) {
    filtered = filtered.filter(w => w.word?.toLowerCase().startsWith(startLetter));
  }

  if (endLetter) {
    filtered = filtered.filter(w => w.word?.toLowerCase().endsWith(endLetter));
  }

  if (requestedType && requestedType !== 'all') {
    filtered = filtered.filter(w => w.type === requestedType);
  }

  if (op && wordLength) {
    if (op === '=') filtered = filtered.filter(w => w.word.length === wordLength);
    else if (op === '<') filtered = filtered.filter(w => w.word.length < wordLength);
    else if (op === '>') filtered = filtered.filter(w => w.word.length > wordLength);
  }

  const result = [];
  const available = [...filtered];
  while (result.length < limit && available.length > 0) {
    const index = Math.floor(Math.random() * available.length);
    result.push(available.splice(index, 1)[0]);
  }

  res.json(result);
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

        <section class="card">
  <div class="filters">
    <div class="field">
      <label>Number of Words</label>
      <input type="number" min="1" max="100" v-model.number="wordCount" />
    </div>

    <div class="field">
      <label>Word Type</label>
      <select v-model="wordType">
        <option value="All">All</option>
        <option value="Noun">Noun</option>
        <option value="Verb">Verb</option>
        <option value="Adjective">Adjective</option>
        <option value="past participle">Past Participle</option>
        <option value="plural">Plural</option>
        <option value="preposition">Preposition</option>
      </select>
    </div>

    <div class="field">
      <label>Starts With</label>
      <input type="text" maxlength="1" v-model="startLetter" />
    </div>

    <div class="field">
      <label>Ends With</label>
      <input type="text" maxlength="1" v-model="endLetter" />
    </div>

    <div class="field">
      <label>Word Length</label>
      <div class="length-filter">
        <select v-model="lengthOperator">
          <option value="">--</option>
          <option value="=">=</option>
          <option value="<"><</option>
          <option value=">">></option>
        </select>
        <input type="number" min="1" v-model.number="wordLength" />
      </div>
    </div>

    <div class="action">
      <button @click="getFilteredWords">Generate Words</button>
    </div>
  </div>
</section>


      <section class="results">
  <h2>Random Words List</h2>

<div class="results-list">

  <div v-show="!results.length" class="placeholder">
    <p>Your generated words will appear here.</p>
  </div>

  <ul v-show="results.length">
    <li v-for="(word, index) in results" :key="index" class="result-item">
      <div class="word-card">
        <strong class="word-title">{{ word.word }}</strong>
        <small v-if="word.type" class="word-type">({{ word.type }})</small>
        <p class="word-meaning">{{ word.meaning }}</p>
      </div>
    </li>
  </ul>

</div>
</section>

This is the normal HTML form that will be placed inside <template></temple>.

This is the Vue.js variables section:

data() {
    return {
      menuOpen: false,
      results: [],
        wordCount: 3,
        wordType: 'All',
        startLetter: '',
        endLetter: '',
        lengthOperator: '',
        wordLength: null
    };
  },

Below is the code to send request to express server:

async getFilteredWords() {
        const params = new URLSearchParams({
          count: this.wordCount,
          type: this.wordType,
          start: this.startLetter,
          end: this.endLetter,
          op: this.lengthOperator,
          len: this.wordLength
        });
   
const res = await fetch(`http://localhost:3001/api/random?${params.toString()}`); 

        this.results = await res.json();
        this.$nextTick(() => {
    const resultsSection = document.querySelector('.results');
    if (resultsSection) {
      resultsSection.classList.add('show');
      resultsSection.classList.add('highlight');

  
setTimeout(() => {
        resultsSection.classList.remove('highlight');
      }, 1500);
    }
  });
      }