Pass user input from front end to back end in Node/Express

Question

I'm trying to make a simple app that parses a blob of tweets.

First, the basic file structure is:

On the front page (index.html), the user enters a Twitter user name in a text input field:

<input type="text" id="user-input" maxlength="25">
<button id="grabInput" onclick="storeInput()">Submit</button>

The storeInput() function lives in my app.js file in the back end where it has access to the Node modules I'm using to hit the Twitter API.

I've tried changing the file path in my script element to <script src="../app.js"></script> but it doesn't work.

Can anyone help me understand how the front end communicates with the back end in a Node/Express app? I'm very frustrated because each 'half' of my app tests out okay, but I can't connect them.

Thanks!

Answer 1

you need to understand the basics of the web applications.

you can't call a server side storeInput() JavaScript function directly from the browser.

your web application has two parts. Server side and client side.

your existing storeInput() is trying to execute in the client side, Eg. In the browser. So you need it to make a request to the server and configure the server to redirect that request to the app.js . Then app.js will use nodeModule Twitter API to get data and respond to the request accordingly. Then you can render the client side according to the respond sent by your server.

But you don't have to do all of these, if you only want to simply show the posts from the Twitter without any server side manipulation. Twitter has a API that you can directly call from the client side and extract the data.I strongly recommend you to use Twitter API if you want to simply show the posts since it is faster, simple and secure.

Answer 2

Execution example that should applies generic form post + express

HTML

<form method="POST" action="/foo-route">
   <input type="text" id="bar" name="bar" />
   <button type="submit">Send</button>
</form>

Express route

router.post('/foo-route',(req,res) => {
  if(typeof req.body.bar === 'undefined'){
    // The parameter is missing, example response...
    res.status(400).json({ error: 'missing parameter bar', data: null }); // Only an  example
    return;
  }

  let bar = req.body.bar;

  res.status(200).json({ error: null, data: bar }); // We received the value and only to show the example, returns it in a json within the key 'data'

});

The above example shows you how to handle input text from the form, and handle properly in the back-end. Adapt to your trouble should be easy. Let me know if not. And remember that add the field name=".." in your inputs. <input type="text" id="something" name="myGreatName" /> , then access it with req.body.myGreatName .

Answer 3

Why not use an HTML get form?. This way you can send the user input back to your server where you could have a route to process this input, interact with the twitter API and then render back the results.