Tips for updating server-side variables from the client-side in Next.js

There is a code snippet in api/scraper.js file that I need help with.

const request = require("request-promise");
const cheerio = require("cheerio");

let url = "https://crese.org/distintivo-azul/";

let result;

request(url, (err, response, html) => {
    if (!err && response.statusCode == 200) {
        const $ = cheerio.load(html);

        const allText = $("html *").contents().filter(function () {return this.type === "text"}).text();
        
        const texts = ["respeto a la dignidad de las personas", "respect for the dignity of people"]
        result = allText.includes("respeto a la dignidad de las personas")

    }
})

export default function handler(req, res) {
    res.status(200).json({result: result})
}

The code is functioning properly, but I need to dynamically change the url variable. I have a form on the client side where users can input the new URL... How can I update the url variable on the server side when the user submits the form?

In simple terms, I want to "Modify the url variable in api/scraper.js using the form input from the client side."

Any suggestions on how to achieve this?

EDIT Here's what the client side looks like:

// Automate steps process
const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch("/api/scraper");

    if (!response.ok) {
        throw new Error(`Error: ${response.status}`);
    }

    const result = await response.json();
    console.log(Object.values(result))
    return setData(result)
    //console.log(event.target.url.value);
  };

// get results from backend
const [results, setData] = useState([])


return (
    <div>
        <Head>
            <title>Blue Token | Steps</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/logo.png" />
        </Head>

        <div className={styles.minting}>
            <form onSubmit={handleSubmit}>
                <h1>Enter Your website URL</h1>
                <label>We are going to check if you have the requesits</label><br /><br />  
                <input type="url" name="url" placeholder="url" />
                <input type="submit" />
            </form>

Answer №1

To achieve this functionality, you can implement the following approach. Make sure to include the URL from the client within the body of the HTTP request.


function beginScraping(req, res) {
  request(req.body, (err, response, html) => {
    if (!err && response.statusCode == 200) {
      const $ = cheerio.load(html);

      const allText = $("html *")
        .contents()
        .filter(function () {
          return this.type === "text";
        })
        .text();

      const texts = [
        "respeto a la dignidad de las personas",
        "respect for the dignity of people"
      ];
      let result = allText.includes("respeto a la dignidad de las personas");

      res.status(200).json({ result: result });
    }
  });
}

export default function handler(req, res) {
if(req.method==='POST')
  beginScraping(req, res);
}



Client

const [results, setData] = useState([]);
  const [url, setUrl] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    
    // The URL is passed inside the request body here and will be received on the backend

    const response = await fetch("/api/scraper", { method: "POST", body: url });

    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }

    const result = await response.json();
    console.log(Object.values(result));
    return setData(result);
    //console.log(event.target.url.value);
  };

  return (
    <div>
      <div>
        <form onSubmit={handleSubmit}>
          <h1>Enter Your website URL</h1>
          <label>We are going to check if you have the requesits</label>
          <br />
          <br />
          <input
            type="url"
            name="url"
            placeholder="url"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
          />
          <input type="submit" />
        </form>
      </div>
    </div>
  );


Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the background hue of the 'td' element within an ajax request

When I press a button, an ajax call is triggered below. In this call, I append 'td' elements with values to a table. Specifically, on the line ''</td><td>' + result[i].preRiskCategory +', I am attempting to change ...

Implementing CSS styles to Iframe content

I have written the following code snippet to display an iframe: <iframe scrolling='no' frameborder='1' id='fblike' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.XYZ.com%2F&amp;send=false& ...

Placing a dropdown menu on top of an image

I currently have a slightly rotated menu bar with two buttons as an example: https://i.stack.imgur.com/0sI2P.jpg Due to the rotation, normal HTML handling is not feasible. I am considering using a <map> element to create hyperlinks over the menu it ...

Testing a React component to ensure that it correctly handles clicks occurring outside

Utilizing the solution found in this particular answer to address clicking outside of a component: componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventLis ...

Tips for incorporating jQuery UI into Angular 6

No matter how many methods I have tried from StackOverflow, I cannot seem to get jquery-ui to work in my angular 6 component. Here's what I've attempted: I went ahead and ran npm install jquery jquery-ui to install both jquery and jquery-ui. ...

Displaying a pop-up message over the "Login button" for users who are not currently logged in

I am currently in the process of developing a website using node.js and express. I have successfully integrated all the login functionality through passport, allowing users to easily log in or out by utilizing res.user. However, I now want to enhance the ...

Using <span> tags to wrap sentences within <p> tags while maintaining the rest of the HTML formatting

In order to achieve my goal, I have utilized the following code to extract content within tags and encapsulate each sentence in tags for easier interaction. $('p').each(function() { var sentences = $(this) .text() ...

GUI interface for interactive three.js fragment shaders

I am currently experimenting with the three.js webGL shader example and am attempting to implement a GUI that can dynamically control the parameters of the shader in real time. Is this achievable? It appears that when I place the effectController variable ...

Unlocking the potential of the Bootstrap search dropdown

Currently, I am utilizing the following code to create a searchable dropdown menu. I found helpful guidance in this forum post. I am seeking advice on how to retrieve the value of the selected option. For example, if 'China' is chosen, I would l ...

Having trouble downloading a PDF file on a local server with React and the anchor tag element

Having trouble downloading a pdf file from my react app to my Desktop. I've reached out for help with the details How to download pdf file with React. Received an answer, but still struggling to implement it. If anyone new could provide insight, that ...

Dealing With HttpClient and Asynchronous Functionality in Angular

I've been pondering this issue all day. I have a button that should withdraw a student from a class, which is straightforward. However, it should also check the database for a waiting list for that class and enroll the next person if there is any. In ...

Adjust dropdown options based on cursor placement within textarea

I have a textarea and a dropdown. Whenever a user selects an option from the dropdown menu, it should be inserted into the text area. However, I am facing a bug where the selected value is being inserted at the end of the text instead of at the current cur ...

Restricting the amount of requests per user within a single hour [Node.js]

As I work on developing a server side application using Nodejs and Express, one thing that crosses my mind is limiting the number of requests per user within a specific time frame to prevent malicious hackers from overwhelming the server with spam. I&apos ...

An issue has been identified where the Redux dispatch function is not functioning properly on

I am currently utilizing Next.js, ts, redux, redux-saga, redux-wrapper in their latest versions. I am focused on fetching recipes through an API connected to MongoDB. Initially, I use getServerSideProps to load recipes and upon clicking a button, more re ...

Having trouble seeing the Facebook registration page on Firefox?

Encountering some issues with Facebook and Firefox. Specifically, the registration popup on Facebook always appears empty when using Firefox. I have tried different approaches to the popup code but so far, nothing seems to be resolving the issue. Is there ...

Correct the string based on a character error

When I have text to display in HTML, for example: var htmlStr = "1.first thing %10-15%. 2.second thing %25-44%. 3.third" And I want to display it in a div: $('#div1').html(htmlStr); However, when I display it in a DIV1 in HTML5 on a mobile pho ...

Check for pattern using JavaScript regular expression

Utilizing ng-pattern to validate a regular expression. The pattern must include 3 letters and 2 numbers in a group. For example: G-31SSD or G-EEE43 Currently, the pattern only matches the second example. ng-model="newGroup.groupCode" ng-pattern="/^&bso ...

Display additional information upon hovering without disrupting the neighboring elements

When I hover over a component, I want to display more details and scale it up. However, this action ends up displacing the surrounding components. Take a look at the screenshot for reference: Below is the code snippet where I defined the styling for an MU ...

Set values for scope variables that are created dynamically

I am currently working on a solution to toggle dynamically generated rows of data. I have attempted using ng-init and passing it to a function, but I seem to be making a mistake somewhere and struggling to understand if this is even feasible. The issue see ...

forming an instance from JSON information

In a .json file, I have data that includes information on countries such as their currency, major language, and land area in square kilometers or square miles. { "countries": { "sweden": { "currency": "Swedish krona", " ...