Getting the name of parameters from Vue 3/Express

Question

Getting the name of parameters from Vue 3/Express

Greetings, I want to start by apologizing if the title of my question caused any confusion for those reading it. I struggled to find the right wording. The issue at hand involves a problem with sending a get request from my axios instance to my express instance. When I send data from axios, the object displays all the necessary data. However, when I attempt to use that data in express using req.params.email, the value it holds is :email. Here is the code snippet:

Client/Axios

  checkEmail (data) {
    return http.get('/users/:email', data)
  },

Value of 'data' Object

{email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47132f2e340e34070a2a262e2b69083520">[email protected]</a>'}

Server/Express

  router.get('/users/:email', function (req, res) {
    console.log(req.params.email)
    const data = User.find({ email: req.params.email })
    return res.sendStatus(200).json(data)
  })

Server Console Log

{ email: ':email' }

On a related note, I have attempted to just use req.params but it yields the same result. I would greatly appreciate any insights on what might be going wrong!

node.js express axios

Answer 1

Answer №1

This code is effective when switching from hard-coded data to using dynamic data retrieval.

Replace:

    const data = {
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8df9e8fef9cdeae0ece4e1a3eee2e0">[email protected]</a>',
        first_name: 'Tom',
        last_name: 'Cruise'
    }

With:

    const data = User.find({ email: req.params.email  })

server.js

const express = require("express")
const axios = require('axios')
const cors = require("cors")

const app = express()
app.use(cors())

app.get("/users/:email", async (req, res) => {
    console.log("params", req.params);
    // const data = User.find({ email: req.params.email  })
    const data = {
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="473322343307202a262e2b6924282a">[email protected]</a>',
        first_name: 'Tom',
        last_name: 'Cruise'
    }
    res.status(200).json(data);
});

app.listen(3000, () => { console.log("Listening on :3000") })

client.js

const axios = require('axios')
const checkEmail = async (data) => {
    try {
        const response = await axios.get(`http://localhost:3000/users/${data}`);
        return Promise.resolve(response.data)
    } catch (error) {
        return Promise.reject(error)
    }
};

checkEmail('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07536f6e744e74474a7e426a66666629487560">[email protected]</a>')
    .then(result => {
        console.log('user is : ' + JSON.stringify(result))
    })
    .catch(error => {
        console.log(error.message)
    });

Install dependencies

npm install express axios cors

Run server

node server.js

Run client

node client.js

Server Result:

https://i.stack.imgur.com/R97ia.png

Client Result:

https://i.stack.imgur.com/6XWqS.png

Answer 2

This code is effective when switching from hard-coded data to using dynamic data retrieval.

Replace:

    const data = {
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8df9e8fef9cdeae0ece4e1a3eee2e0">[email protected]</a>',
        first_name: 'Tom',
        last_name: 'Cruise'
    }

With:

    const data = User.find({ email: req.params.email  })

server.js

const express = require("express")
const axios = require('axios')
const cors = require("cors")

const app = express()
app.use(cors())

app.get("/users/:email", async (req, res) => {
    console.log("params", req.params);
    // const data = User.find({ email: req.params.email  })
    const data = {
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="473322343307202a262e2b6924282a">[email protected]</a>',
        first_name: 'Tom',
        last_name: 'Cruise'
    }
    res.status(200).json(data);
});

app.listen(3000, () => { console.log("Listening on :3000") })

client.js

const axios = require('axios')
const checkEmail = async (data) => {
    try {
        const response = await axios.get(`http://localhost:3000/users/${data}`);
        return Promise.resolve(response.data)
    } catch (error) {
        return Promise.reject(error)
    }
};

checkEmail('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07536f6e744e74474a7e426a66666629487560">[email protected]</a>')
    .then(result => {
        console.log('user is : ' + JSON.stringify(result))
    })
    .catch(error => {
        console.log(error.message)
    });

Install dependencies

npm install express axios cors

Run server

node server.js

Run client

node client.js

Server Result:

https://i.stack.imgur.com/R97ia.png

Client Result:

https://i.stack.imgur.com/6XWqS.png

Getting the name of parameters from Vue 3/Express

Answer №1

Similar questions

Encountering problems while trying to run a discord.js v14.3.0 bot on a virtual private server

Is it possible to simultaneously run both an npm server and a proxy in separate directories with just one command in

Removing a post through the integration of socket.io, MySQL, Node.js, and Express

Encountered an uncaughtException in Node.js and mongoDB: User model cannot be overwritten once compiled

When using express, the response.sendFile() function is causing an Uncaught SyntaxError with the error message: Unexpected token <

Vue Server-Side Rendering does not retain the URL hash during redirection

Error: The function Object.entries is not defined

Passport appears to be experiencing amnesia when it comes to remembering the user

Error in Next.js using next-auth/react: "PrismaClient cannot be executed in the browser"

Building a secure NodeJS REST API with authentication capabilities utilizing Passport and OAuth2 with the integration of

Step-by-step guide on deploying an Angular and Express project to Google App Engine

I've been attempting to develop a React application, but I consistently encounter the following error: "npm ERR! cb() function was never invoked!"

The dependency that was installed in the node_modules directory is now showing as missing the

Extract a value from a json document

Struggling with retrieving empty parameters, queries, and body from an Axios API call for the past three days. It's a learning experience as I am new to the MERN stack

What is the best method for directing a search URL with an embedded query string?

A guide on converting TypeScript to JavaScript while utilizing top-level await

Utilizing unique layouts for specific views in sails.js and angular.js

Accessing files from various directories within my project

In the realm of JavaScript, the localeCompare() string method is more than willing to accept the presence of 'undefined' as a valid parameter for 'locale', while opting to outright reject any instance of