I would like my website to have a search bar in the top section that returns a single document (ink) from a mongo database. On the same page, I would like to be able to access all documents from the same database.
I'm having trouble trying to figure out how to do this on one page, since I can only send one result to URL.
Is there some way to send all documents to the page, then do a search with AJAX on the client side? I'm new to coding, and wondering if I'm going about this wrong.
I appreciate any help. Here is part of my code that sends the results I want, but to different pages.
app.get("/", function(req, res){
// FIND ONE INK FROM DB
var noMatch = null;
if(req.query.search) {
Ink.find({ink: req.query.search}, function(err, foundInk){
if(err){
console.log(err);
} else {
if(foundInk.length < 1) {
noMatch = "No match, please try again.";
}
res.render('new-index', {ink: foundInk, locationArray: locationArray, noMatch: noMatch })
}
});
} else {
// FIND ALL INKS FROM DB
Ink.find({}, function(err, allInks){
if(err){
console.log(err);
} else {
res.render("index", {ink: allInks, locationArray: locationArray, noMatch: noMatch });
}
});
}
});
You can use separated endpoints for each request. For the full access request, you can render the page, calling res.render, and for the search request, you can return a json calling res.json. Something like this:
app.get("/", function(req, res){
// FIND ALL INKS FROM DB
Ink.find({}, function(err, allInks){
if(err){
console.log(err);
} else {
res.render("index", {ink: allInks, locationArray: locationArray, noMatch: noMatch })
}
});
})
app.get("/search", function(req, res) {
// FIND ONE INK FROM DB
var noMatch = null;
Ink.findOne({ink: req.query.search}, function(err, foundInk){
if(err){
console.log(err);
} else
if(!foundInk) {
noMatch = "No match, please try again.";
}
res.json({ink: foundInk, locationArray: locationArray, noMatch: noMatch })
}
});
});
Note the call to Ink.findOne in the /search handler, which will return only one document.
This way you can make and AJAX request to /search, and parse the json returned from the server.
I've created a sample repository with the exact same issue here
Ideally you make an endpoint like this.
( id parameter is optional here...thats why the '?' )
www.example.com/api/inks/:id?
// return all the inks
www.example.com/api/inks
// return a specific ink with id=2
www.example.com/api/inks/2
So now you can render all the links via /inks and search a particular ink by using the endpoint /ink/:id?
Hope this helps !
Related
As a personal project, I'm trying to build a social media site for teddy bear collectors. I would like users to be able to make a "collection" page which they can populate with individual profile pages for each of their bears. Finally, I would like other users to be able to comment on both the collection page and the individual profile pages.
However, I'm running into an error on the "/new" route for comments on the individual profile pages. I can't get it to find the id for the parent collection.
Below is the code I'm working with. I start by finding the id for the collection, then I get try to get the id for the bear (individual profile page). However, the process keeps getting caught at the first step.
var express = require("express");
var router = express.Router({mergeParams: true});
var Bear = require("../models/bear");
var Comment = require("../models/comment");
var Collection = require("../models/collection");
var middleware = require("../middleware");
//comments new
router.get("/new", middleware.isLoggedIn, function(req, res) {
Collection.findById(req.params.id, function(err, foundCollection) {
if(err || !foundCollection){
req.flash("error", "Collection not found");
return res.redirect("back");
}
Bear.findById(req.params.bear_id, function(err, foundBear) {
if(err){
res.redirect("back");
} else {
res.render("bcomments/new", {collection_id: req.params.id, bear: foundBear, collection: foundCollection});
}
});
});
});
//bcomments create
router.post("/", middleware.isLoggedIn, function(req, res){
Collection.findById(req.params.id, function(err, foundCollection) {
if(err || !foundCollection){
req.flash("error", "Collection not found");
return res.redirect("back");
}
//look up bear using id
Bear.findById(req.params.id, function(err, foundBear){
if(err){
console.log(err);
res.redirect("/bears" + bear._id);
} else {
//create new comment
Comment.create(req.body.comment, function(err, comment){
if(err){
req.flash("error", "Something went wrong");
console.log(err);
} else {
//add username and id to comment
comment.author.id = req.user._id;
comment.author.username = req.user.username;
//save comment
comment.save();
//connect new comment to bear
bear.comments.push(comment);
bear.save();
//redirect bear show page
req.flash("success", "Successfully added comment");
res.redirect("/collections/" + foundCollection._id + "/bears/" + foundBear._id);
}
});
}
});
});
});
So, instead of rendering the new comment form, it hits a "null" error and redirects back at the first if statement.
If anyone can help me figure this out, I'd be exceedingly grateful.
Thank you.
I think the problem is that you are defining the path "/new" (which has no parameters) and trying to access req.params.id. If you expect to have the parameter id you should define it in the path like this: router.get("/new/:id", .... Check the Express oficial documentation for more details.
EDIT:
You may have mixed req.params with req.query and req.body. If you are passing parameters in the request, you must access them through req.query (for example: req.query.id or req.query.bear_id) in the case of GET and DELETE or through req.body in POST and PUT.
I have a post request which redirects to a new route as you can see
//POST login
app.post('/login', urlencodedParser, function(req,res){
userLogin(req.body, function(response){
if(response == true){
//Activate player login in db
loginPlayerDB(req.body.username);
getPlayerId(req.body.username, function(id){
res.redirect(req.baseUrl + '/:id/profile');
});
} else{
res.send(500, "Username or Password is incorrect");
}
})
});
This function gets called
function getPlayerId(username, callback){
let sql = "SELECT PlayerId FROM users WHERE Username = (?)";
var values = [username];
db.query(sql, values, function(err, result, fields){
if(err){
console.log(err);
} else{
return callback(result);
}
})
}
It redirects to this route
app.get('/:id/profile', function(req,res){
res.render('profile/profile');
})
Everything works great except the URL on the new page is
http://localhost:3000/:id/profile
When it should be something like
http://localhost:3000/6/profile
If the player has an id of 6. How do I fix this
//Solution.
Thank you to MadWard for the help. My mistake was that in my getPlayerId function, I return result, which is an array, instead of result[0].PlayerId in order to get the specific id I was looking for
You are literally redirecting to /:id/profile. This is a string, it is fixed, and will always be '/:id/profile'.
What you want to do instead is, using template strings:
getPlayerId(req.body.username, function(id){
res.redirect(`${req.baseUrl}/${id}/profile`);
});
Using normal string concatenating like you were doing:
getPlayerId(req.body.username, function(id){
res.redirect(req.baseUrl + '/' + id + '/profile');
});
I'm pretty new to express! I didn't find the solution here as my console.log perfectly prints out the "user". However, when I display final page the user-data won't show up. It's just empty. Only the concert-data becomes visible on the page. Now I wonder if what I did is even "allowed".
Any Ideas on why the user data does not show up on the rendered page?
app.get("/concerts/:id", function(req, res){
Concert.findById(req.params.id, function(err, concert){
if(err){
console.log(err);
} else {
User.find({username: "tyrel"}, function(err, user){
if(err){
console.log(err);
} else {
console.log(user);
res.render("concert", {user: user, concert: concert});
}
})
}
});
});
The find() function calls the users as an array, so I had to define an index in my ejs file. <%=user[0].avatar%>
I have the following basic document in mongo:
connecting to: test
> db.car.find();
{ "_id" : ObjectId("5657c6acf4175001ccfd0ea8"), "make" : "VW" }
I am using express, mongodb native client (not mongoose) and ejs.
collection.find().toArray(function (err, result) {
if (err) {
console.log(err);
} else if (result.length) {
console.log('Found:', result);
mk = result;
console.log('mk = ', mk);
} else {
console.log('No document(s) found with defined "find" criteria!');
}
//Close connection
db.close();
});
}
});
Here is the render code:
// index page
app.get('/', function(req, res) {
res.render('pages/index', { make: result });
});
And i want to pass the data make: VW into my index.ejs file:
<h2>Cars:</h2>
<h3>My favorite make is <%= make %>
This should be real simple and straightforward but i just don't understand how to pass the "mk" variable (which i can console.log to the screen) to be rendered by the ejs view?
You should use the find method inside the route (or with a callback) to get the result and render it:
app.get('/', function(req, res) {
collection.find().toArray(function(err, result) {
if(err) {
console.log(err);
res.status('400').send({error: err});
} else if(result.length) {
console.log('Found:', result);
mk = result;
console.log('mk = ', mk);
res.render('pages/index', {make: mk});
} else {
console.log('No document(s) found with defined "find" criteria!');
res.status('400').send({error: 'No document(s) found'});
}
//Close connection
db.close();
});
});
Very simple, your are outputting an array of JSON objects
Here is one way to visualise it:
[{a:b},{a:b},{a:b},{a:b}];
If you want the first result it would be array[0].a
so you simply need to call it this way:
<%= make[0].(your database key here) =>
//example
<%= make[0].name =>
A more sensible way to get this done would be to iterate through the array and output only the result you want on the server side. If you send all your data to your client you might have security issues depending on what you send.
It should be simple, but you are defining mk just like this: mk = result So because you want to pass a variable to an ejs file you need
"var mk = result"
Have a good day, Ben.
Im trying to implement some way to stop my code to redirect me before I get the response from the omdb api I am using.
My function for making a search for a movie and saving all titles in a session looks like this:
app.post('/search', isLoggedIn, function(req, res) {
function getMovies(arg, callback){
console.log('In getMovies');
console.log('searching for '+arg);
omdb.search(arg, function(err, movies) {
if(err) {
return console.error(err);
}
if(movies.length < 1) {
return console.log('No movies were found!');
}
var titles = [];
movies.forEach(function(movie) {
// If title exists in array, dont push.
if(titles.indexOf(movie.title) > -1){
console.log('skipped duplicate title of '+movie.title);
}
else{
titles.push(movie.title);
console.log('pushed '+movie.title);
}
});
// Saves the titles in a session
req.session.titles = titles;
console.log(req.session.titles);
});
// Done with the API request
callback();
}
var title = req.body.title;
getMovies(title, function() {
console.log('Done with API request, redirecting to GET SEARCH');
res.redirect('/search');
});
});
However I dont know if I implement callback in the right way, because I think there can be a problem with the api request actually executing before the callback, but not finishing before. And therefor the callback is working..
So I just want 2 things from this question. Does my callback work? And what can I do if a callback won't solve this problem?
Thankful for all answers in the right direction.
Add
callback();
To, like this
omdb.search(arg, function(err, movies) {
if (err) {
return console.error(err);
}
if (movies.length < 1) {
return console.log('No movies were found!');
}
var titles = [];
movies.forEach(function(movie) {
// If title exists in array, dont push.
if (titles.indexOf(movie.title) > -1) {
console.log('skipped duplicate title of ' + movie.title);
} else {
titles.push(movie.title);
console.log('pushed ' + movie.title);
}
});
// Saves the titles in a session
req.session.titles = titles;
callback();
});
omdb.search is asynchronous function that's why callback executed before omdb.search