How do I search for a data in the database with Node JS, Postgres, and dust js

Question

I'm making a webpage with Node JS with dustjs and PostgreSQL. How do I make a search query in the html, so I can pass the value to the app.get Do I need to use JQuery?

app.get('/teachers', function(req, res){
  pool.connect(function(err, client, done){
    if(err) {
      return console.error("error", err);
    }
    client.query('SELECT * FROM teachers', function(err, result){
      if(err){
        return console.error('error running query', err)
      }
      res.render('teacherindex', {teachers: result.rows});
      done();
    });
  });
});



app.get('/teachers/:str', (req,res)=>{
  pool.connect((err, client, done) => {
    if (err) throw err
    client.query('SELECT * FROM teachers WHERE name = $1', [req.query.namesearch], (err, result) => {
      done()
      if (err) {
        console.log(err.stack)
      } else {
        res.render('teacherindex', {teachers: result.rows});
      }
    })
  })
})

This is my JQuery

$("#myBtn").click(function(){
    var str = $("#myInput").val();
    var url = '/teachers/'+str;
    if(confirm('Search Record?')){
        $.ajax({
            url: url,
            type: 'put',
            success: function(result){
                console.log('Searching');
                window.location.href='/teachers';
            },
            error: function(err){
                console.log(err);
            }
        });
    }
});

My HTML

<input type="text" id="myInput" data-id="namesearch">
<button type="button" id="myBtn">Show Value</button>

Thank you!

Answer 1

FINAL ANSWER:

Ok so it turns out the issue you were having was something completely different. You are trying to use server side rendering for this, and I was showing you how to render the retrieved data on the client side.

I have forked, and updated your repo - which can be found at the link below..

Please review my changes and let me know if you have any questions.

Working repo: https://github.com/oze4/hanstanawi.github.io

Demo Video: https://raw.githubusercontent.com/oze4/hanstanawi.github.io/master/fake_uni_demo.mp4

---

---

---

EDIT:

I went ahead and built a repository to try and help you grasp these concepts. You can find the repo here - I tried to keep things as simple and understandable as possible, but let me know if you have any questions.

• I had to make some minor changes to the paths, which I have commented explanations on the code in the repo.

• I am using a "mock" database (just a JSON object in a different file) but the logic remains the same.

• The index.js is the main entry point and contains all route data.

• The index.html file is what gets sent to the user, and is the main HTML file, which contains the jQuery code.

If you download/fork/test out the code in that repo, open up your browsers developer tools, go to the network tab, and check out the differences.

Using req.params

Using req.query

---

---

---

ORIGINAL ANSWER:

So there are a couple of things wrong with your code and why you are unable to see the value of the textbox server side.

• You are sending a PUT request but your server is expecting a GET request
• You are looking for the value in req.query when you should be looking for it in req.params
• You are looking for the incorrect variable name in your route (on top of using query when you should be using params) req.query.namesearch needs to be req.params.str
• See here for more on req.query vs req.params

More detailed examples below.

• In your route you are specifying app.get - in other words, you are expecting a GET request to be sent to your server.. but your are sending a PUT request..
• If you were sending your AJAX to your server by using something like /teachers?str=someName then you would use req.query.str - or if you wanted to use namesearch you would do: /teachers?namesearch=someName and then to get the value: req.query.namesearch
• If you send your AJAX to your server by using the something like /teachers/someName then you should be using req.params.str

//  ||
//  \/ Server is expecting a GET request
app.get('/teachers/:str', (req, res) => {
  // GET THE CORRECT VALUE
  let namesearch = req.params.str;

  pool.connect((err, client, done) => {
    // ... other code here

    client.query(
      'SELECT * FROM teachers WHERE name = $1',

      // SPECIFY THE CORRECT VALUE
      namesearch,

      (err, result) => {
        // ... other code here
      })
  })
});

• But in your AJAX request, you are specifying PUT.. (should be GET)
• By default, AJAX will send GET requests, so you really don't have to specify any type here, but I personally like to specify GET in type, just for the sake of brevity - just more succinct in my opinion.
• Again, specifying GET in type is not needed since AJAX sends GET by default, specifying GET in type is a matter of preference.

$("#myBtn").click(function () {
  // ... other code here
  let textboxValue = $("#myTextbox").val();
  let theURL = "/teachers/" + textboxValue;

  // OR if you wanted to use `req.query.str` server side
  // let theURL = "/teachers?str=" + textboxValue;

  if (confirm('Search Record?')) {
    $.ajax({
      url: theURL,
      //     ||
      //     \/ You are sending a PUT request, not a GET request
      type: 'put', // EITHER CHANGE THIS TO GET OR JUST REMOVE type
      // ... other code here
    });
  }
});

It appears you are grabbing the value correctly from the textbox, you just need to make sure your server is accepting the same type that you are sending.