How to pass a query string from Angular to ExpressJS - node.js

Question

I am using Express + MongoDB native driver (NOT MONGOOSE), and I would like to create an API endpoint that can 'filter' through my results.
Structure:
In my component, I have 30 "filters" (select boxes), and I have 5000+ documents in my 'xxxx' collection being displayed in a catalog fashion. Every time the user clicks submit, I would like to send a query to MongoDB and update my results to my catalog. This can be done with services + subscriptions, that's fine. My issue is creating the API endpoint that can consume queries.
I have an Angular component which has about 30 select boxes, where each value is a fragment of a query string.
Consider the following select boxes:
<select name="test" form="myform">
<option value="{'name': 'Volvo'}">Volvo</option>
<option value="{'name': 'Honda'}">Honda</option>
</select>
<select name="test2" form="myform">
<option value="{'model': 'ILX'}">ILX</option>
<option value="{'model': 'MDX'}">MDX</option>
</select>
When the form is submitted, the following query should be passed to express:
/filter/test/{{'name': 'Honda'},{'model': 'ILX'}}
This is the ('ideal') code for my express endpoint (this produces errors):
router.get('/filter/test/:query', function(req, res) {
var collection = db.get().collection('xxxxxx')
collection.find({ query }).toArray(function(err, docs) {
res.send(docs)
})
})
Questions:
1. How can I pass a query (or string) from this form to express? (I believe it's the API endpoint in my submit button's action markup)
2. How do I construct this API endpoint correctly?
3. Is something like this safe/secure in production? If not, how do I secure it or what is a better implementation?

Answer 1

It depends on what you are developing. If your data is not too much sensitive put it in url params and send a get call and if data is sensitive use a post or patch call. This is what rest api does for deletions use delete call and do not submit the form directly to rest api try to use ajax to hit api behind the scenes.
Create a form like this
<form action="/filter/test/{{test}}/{{model}}">
<select name="test" [(ngModel)]="test" form="myform">
<option [value]=" 'Volvo'">Volvo</option>
<option [value]="'Honda'">Honda</option>
</select>
<select name="test2" [(ngModel)]="model" form="myform">
<option [value]="'ILX'">ILX</option>
<option [value]="'MDX'">MDX</option>
</select>
</form>
And read it in api like this
router.get('/filter/test/:test/:model', function(req, res) {
var collection = db.get().collection('xxxxxx')
collection.find({ test : req.params.test, model : req.params.model }).toArray(function(err, docs) {
res.send(docs)
})
})
If you have multiple fields and you have a case user will fill up some of them and some not use patch/post as my suggestion create your angular model like this
let data = {
field1: "",
field2: "",
...
}
Now use field1, field2 and rest in you form models and using ajax call post/patch this data object directly to rest end point you dont need url params now extract and verify them in req.body you will find them. For this you need to add a json parser in nodejs.