0

Preface: I am writing a Web App using Node.js, Express, and MongoDB.

When a button is clicked I am trying to pass a parameter via URL from my index.ejs to the Express controller ItemController.js in order to dynamically create a filtered set of data.

The button is defined within index.ejs as follows:

<button type="button" class="btn btn-primary" value="/items/items" onclick="loadItems(value, 'Scripting Languages')">
      Scripting Languages
</button>

In my external Javascripts file which houses miscellaneous functions, loadItems executes the following:

function loadItems(page, subcategory) {
    window.history.replaceState({}, '', "?subcat=" + subcategory); //set URL Param
    $('#mainContent').load(page); //load item listing page into grid within HTML GridLayout
}

After this, the router/controller handles the data filtering and page rendering:

Router (item.js)

...
// Get all items
router.get('/items', item.items);
...

Controller (ItemController.js)

...
  // loads item listings
  itemController.items = function(req, res) {
    Item.find({}).exec(function (err, items) {
      if (err) {
        console.log("Error:", err);
      }
      else {
        var URLSubcat = "Scripting Languages"; //this variable needs to change
        var filtered = items.filter(function(el) {
          return el.subcategory === URLSubcat;
        });
        res.render("../views/items/items", {items: filtered});
      }
    });
  };
...

I have tried using req.query.subcat in order to try and grab the parameter from the URL, however it comes back as undefined. I have also tried the techniques in the links below to no avail. What should I be doing to accomplish this? Is there a better way to go about this?

Previously Tried

How to get GET (query string) variables in Express.js on Node.js?

How to access the GET parameters after "?" in Express?

ryano
  • 185
  • 1
  • 13

1 Answers1

0
$('#mainContent').load(page);

The URL you are requesting is stored in the page variable.

loadItems(page, subcategory)

… which is defined as an argument

onclick="loadItems(value, 'Scripting Languages')"

… which is passed from the onclick event handler

value="/items/items"

… which gets it value from that attribute.


The query string doesn't show up because the URL you are requesting does not include a query string!

The only query string you have is from here:

 window.history.replaceState({}, '', "?subcat=" + subcategory); 

… which modifies the URL in the browser addressbar and history without actually requesting it.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Oh man, you're totally right! I forgot that `replaceState` only changes the URL in the address bar and not the request itself... Okay, great! So since this is the case, I would have to change the button value to `value="/items/items?subcat=Scripting Languages"`? – ryano Nov 20 '18 at 15:47
  • Went through and changed `value` to the above comment, everything works perfectly now. Thanks for your help! – ryano Nov 20 '18 at 15:59