How to retrieve data from node.js (server side) using a variable from javascript (client side)?

Question

I am quite new in node.js and trying to learn the language.

I am wondering if it is possible to get a variable from the html page and use that variable to find a row in the database and view that data in html.

What I intend to do is I have a table where I can click on the info icon which will direct me to the details of that rows data.

I have gotten the data that I want to refer to from the code below but I don't know how to pass that variable to the server side and proceed with it.

const icon = document.getElementsByClassName("iconButton");

icon.addEventListener('click', myFunction(this));

function myFunction(x){
    var $row;
    var $title;
    var $time;
    $(".iconButton").click(function() {
        $row = $(this).closest("tr");
        $title = $row.find(".topic").text();
        $time = $row.find(".time").text(); 
        alert($title);
        alert($time);
    });
}

You'll have to make an ajax-request to your server: `$.get("your-serverside-script-url-here", { /* request data here */ }).then(function(response) { /* do something with the response from the server */ });` — Đinh Carabus, Feb 07 '20 at 19:34
Welcome to SO! Yes, it's possible. The question is a bit broad--you'll need to break it into steps. Expose a route on the server that accepts a parameter or query string of some sort. Have that route run a DB query using its parameter or query string. Once that's set up, make an ajax request using your jQuery script. All of these are discussed elsewhere--it looks like you're on the ajax step, so I'll vote to close as a dupe of that. — ggorlen, Feb 07 '20 at 19:34

score 1 · Answer 1 · answered Feb 07 '20 at 19:36

Since you'll undoubtedly have a lot of these buttons, I think you'll find it more efficient to have an event handler on the outer item. And then, use that to make an HTTP request via the Fetch API.

So, in your HTML, do something like this:

<table>
  <thead>
    <tr>
      <th>Complaint Title</th>
      <th>Created At</th>
      <th>Reported By</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr data-complaint-id="12345">
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>
        <button class="info"></button>
      </td>
    </tr>
  </tbody>
</table>

Note that I set a complaint ID on the entire row here. That's to easily provide the data for the whole row, as you'll likely add other actions in the future.

Now, in your script, add an event handler to the table:

document.querySelector('table').addEventListener('click', (e) => {
  if (e.target.matches('[data-complaint-id] .info')) {
    // If an info button is a child of a row with a complaint ID, then do something.
  }
});

Finally, within that if block, make your HTTP request:

const complaintId = this.target.closest('[data-complaint-id]').dataset.complaintId;
fetch('https://example.com/complaints/' + encodeURIComponent(complaintId)).then(...);

What you do with that fetch result depends on the data format you send back. See also:

Pedro Mutter · Answer 2 · 2020-02-07T19:39:41.607

You need to have a node server up somewhere. It can be running on your localhost or in the cloud. After you know the server location, you need to make an HTTP request to its endpoint, sending your variable as a parameter, it can be on the query string (URL) or in the body of the request. After you call it, you get the response on your callback and show the data on the screen. Here is an example:

async function makeRequest(param) {
  const result = await fetch(`http://localhost:3000/data?param1=${param}`);

  console.log(result.data);
}

This is a snippet to make a request to a server hosted on localhost:3000, thats serves the path /data and receives the param as query string.

On your server side, you need to create the server with http node buit-in library or use a framework as express.

How to retrieve data from node.js (server side) using a variable from javascript (client side)?

2 Answers2