How to dynamically pass variables to MongoDB queries in a Meteor application

Question

How to dynamically pass variables to MongoDB queries in a Meteor application

Starting a simple meteor app to search a database and running into some issues. I have an input box where the search query is obtained using the code below:

Template.search.events = {
'keydown input#search' : function (event) {
    if (event.which == 13) {
        var item = document.getElementById('search');
        Template.results.results(item.value)    
        //console.log(item);    
        item.value = '';
    }
}
}

The search query is then passed to another function which queries the mongodb to print the result in the template:

Template.results.results = function (item) {
return Products.find({sku: item});
}

However, it doesn't seem to find the item! When running the same query in Chrome's console or using a hardcoded value like {sku: "A2277"} it works fine. Even creating a new variable with a hardcoded value within the Template.results.results function works. What could be causing this issue?

javascript mongodb meteor

Answer 1

Answer №1

Template helpers are intended to be called by the template itself, rather than directly by event handlers. Your code requests a query to be executed and returns a value without any connection to the template. Instead, it is advisable to utilize a session variable in this manner:

Template.results.results = function() {
  return Products.find({sku: Session.get('itemSku')});
};

In your event handler, you can then implement something like the following:

Template.search.events({
  'keydown input#search': function(event) {
    if (event.which === 13) {
      var $item = $('#search');
      Session.set('itemSku', $item.val());
      $item.val('');
    }
  }
});

It's worth noting that jQuery was used here to set/get the item values. Nevertheless, this action will define the session variable and trigger the results to be redrawn reactively.

Answer 2

Template helpers are intended to be called by the template itself, rather than directly by event handlers. Your code requests a query to be executed and returns a value without any connection to the template. Instead, it is advisable to utilize a session variable in this manner:

Template.results.results = function() {
  return Products.find({sku: Session.get('itemSku')});
};

In your event handler, you can then implement something like the following:

Template.search.events({
  'keydown input#search': function(event) {
    if (event.which === 13) {
      var $item = $('#search');
      Session.set('itemSku', $item.val());
      $item.val('');
    }
  }
});

It's worth noting that jQuery was used here to set/get the item values. Nevertheless, this action will define the session variable and trigger the results to be redrawn reactively.

How to dynamically pass variables to MongoDB queries in a Meteor application

Answer №1

Similar questions

Guide on repeatedly clicking the Cookie to enjoy Cookie Clicker on https://orteil.dashnet.org/cookieclicker/ with the help of Selenium and Python

Sending JSON data from a Django view to a JavaScript function

javascript display error message in innerHTML if passwords do not match

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

Methods for bypassing a constructor in programming

Ways to display an error notification alongside another message

Angular JS failing to display error messages

Ways to retrieve the year and month from a given date

Unable to successfully export ExpressJS routes to an external file when targeting the root path

Automatically unselect the "initially selected item" once two items have been selected in Material UI

Ways to implement a single AJAX function for multiple buttons

`Dealing with Java Servlet Exception in Kendo UI Environment`

Tips for sending a MySQL parameter

Javascript in Chrome can be used to initiate and conclude profiling

What is preventing this PHP script from functioning properly with Google Maps?

Obtaining Distinct Values in AngularJS Using ng-option

Calculating the total of two fields within the same schema and storing the outcome in a separate schema in MongoDB

The shared module for next/router is not found in the shared scope default within Next.js and @module-federation/nextjs-mf

Is there a way to send the value of a jQuery variable to be retrieved by a PHP $_POST method?

Rows in a table will not decrease when added anew