How to send data (a url string) in express to backend from frontend?

Question

I am trying to build a wikipedia web scraper api and this is my code:

const app = express()
const port = 3000

const url = "https://en.wikipedia.org/wiki/Yeti_Airlines_Flight_691"

axios.get(url).then(async (res) => {
    try {
        if (res.status == 200) {
            const result = // Doing cheerio stuff here
            app.get('/', (req, res) => {
                res.status(200).send(result)
            })
            app.listen(port, () => {
                console.log(`Example app listening on port ${port}`)
            })
        }
    } finally {
        //
    }
});

How can I send url dynamically to backend using express and do some stuff then send result back to frontend?

What do you mean by "dynamically using express". Do you just want to wait for a response first? — Michael M.
– Michael M., Commented Jan 20, 2023 at 6:18
@MichaelM. I want to send url dynamically to backend using express and do some stuff then send result back to frontend — Tribe56123
– Tribe56123, Commented Jan 20, 2023 at 6:27
The code is all messed up, the axios.get() must be done in the client/frontend and the app.get() and app.listen() calls must remain in the server side right below the port declaration, youtube basic express tutorial will give you the answers you need. — Ricardo Sanchez
– Ricardo Sanchez, Commented Jan 20, 2023 at 7:11
@RicardoSanchez It's not messed up, This is just server side code and I need axios.get() to scraper data from server. axios.get() is also get used in client side to get res — Tribe56123
– Tribe56123, Commented Jan 20, 2023 at 7:35

nikolas.tsombanis · Accepted Answer · 2023-01-21 15:14:04Z

2

Client side:

This is a function you define in your frontend. You set a request link, which must be known here on client side and server side. Thus take something like /request. Then use axios to send a request to the server. You can pass any parameters with „dynamic“ Information as you called it. The server will receive these informations and can handle them.

const getData = () => {
    // insert your server url here instead, with the /request at the end
    const requestLink = `http://localhost:3001/request`;

    axios
      .get(requestLink, {
       params: { url: "wikipedia.de/test123" },
       })
      .catch((error) => {
      // here you can implement error handling
        console.log(error);
      })
      .then((res) => {
      // print result, received from the server
        console.log(res);
      });
  };

Server side:

The backend is going to wait for a request to the defined link /request. If he receives such a request, he is executing the code. The req variable contains your dynamic data, such as the wiki url.

Use res.json to send data back to your frontend.

app.get(`/request`, (req, res) => {
     // do something with the request here
     console.log(req.query);
     // send result to the frontend
     res.json({
       status: "This could be an answer to the frontend.",
     });
    });

edited Jan 21, 2023 at 15:14

answered Jan 20, 2023 at 7:06

nikolas.tsombanis

2161 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ricardo Sanchez Over a year ago

All you need is to explain the code to make this a good answer

Tribe56123 Over a year ago

@actioREACTio Is console.log(req); gonna print www.wikipedia.de/something ? if yes then that's all I need

nikolas.tsombanis Over a year ago

@Tribe56123 yes thats exactly what happens! :)

Tribe56123 Over a year ago

@actioREACTio console.log(req) is not printing params also tried console.log(req.pramas) which is returning empty {}

nikolas.tsombanis Over a year ago

Hello @Tribe56123, I edited my answer. Im sorry, i made a mistake before. The request link must include your server address, and please pass the params the way i did. Now it should work. You can access the params server side by printing out req.query. Please check it again, thanks.

Collectives™ on Stack Overflow

How to send data (a url string) in express to backend from frontend?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related