I have an app that displays recipes on the index page (mywebsite.com/recipes). I want to sort them either by date or by popularity, and have a button directly on the page so the user can choose how he wants to sort the recipes. I am using bootstrap's dropdown menu, which uses anchor tags (would a select menu be better suited?).
Here's the dropdown menu:
<div class="dropdown indexDropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Sort by
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#(WHAT SHOULD I PUT HERE)">Most recent</a></li>
<li><a href="#(WHAT SHOULD I PUT HERE)">Most popular</a></li>
</ul>
</div>
Here's the route I want to use when "Date" is chosen or when nothing is clicked by the user (default sort):
//INDEX ROUTE (SORT BY DATE)
router.get("/WHAT SHOULD I PUT HERE", function(req, res){
if(req.query.search && req.xhr) {
const regex = new RegExp(escapeRegex(req.query.search), 'gi');
// Get all recipes from DB
Recipe.find({title: regex}).limit(9).sort({"createdAt": -1}).exec(function(err, foundRecipes){
if(err){
console.log(err);
} else {
res.status(200).json(foundRecipes);
}
});
} else {
// Get all recipes from DB if no search input
Recipe.find({}).sort({"createdAt": -1}).limit(9).exec(function(err, foundRecipes){
if(err){
console.log(err);
} else {
if(req.xhr) {
res.json(foundRecipes);
} else {
res.render("recipes/index",{recipes: foundRecipes});
}
}
});
}
});
Here's the route I want to use when "Popularity" is chosen or when nothing is clicked by the user (default sort):
//INDEX ROUTE (SORT BY POPULARITY)
router.get("/WHAT SHOULD I PUT HERE", function(req, res){
if(req.query.search && req.xhr) {
const regex = new RegExp(escapeRegex(req.query.search), 'gi');
// Get all recipes from DB
Recipe.find({title: regex}).limit(9).sort({"createdAt": -1}).exec(function(err, foundRecipes){
if(err){
console.log(err);
} else {
res.status(200).json(foundRecipes);
}
});
} else {
// Get all recipes from DB if no search input
Recipe.find({}).sort({"numberOfPins": -1}).limit(9).exec(function(err, foundRecipes){
if(err){
console.log(err);
} else {
if(req.xhr) {
res.json(foundRecipes);
} else {
res.render("recipes/index",{recipes: foundRecipes});
}
}
});
}
});
How should I do this? What href should I assign to each anchor tag in the dropdown menu? Should I just add something like href="/recipes?_sort=POPULARITY"?
Thanks a lot!
<a href='/route1'></a>
creates a get request for route1. So I created two separate routes (route1 and route2) for sorting mongo data.
<a href='/route1'>Sort by Popularity</a>
<a href='/route2'>Sort by Date</a>
router.get("/route1",function(){
Sort data by popularity
})
router.get("/route2",function(){
Sort data by Date
})
Works for me. May not be an optimum method but it just works
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.