I am attempting to send form data from a page to MongoDB in Node.js.
The issue I am running into is when I am clicking the 'Add Group' button to submit the data.. the page tries to complete the request but seems to get stuck when trying to push the data to the database. So it then is just sitting there, stuck, trying to take the inputted data and place it into the database.
Here is my Group Model:
var mongoose = require('mongoose'),
Schema = mongoose.Schema,
path = require('path');
var GroupsSchema = new Schema({
groupName: {type: String}
});
GroupsSchema.virtual('uniqueId')
.get(function(){
return this.filename.replace(path.extname(this.filename), '');
});
module.exports = mongoose.model('Groups', GroupsSchema);
Here is my Group Controller:
var Models = require('../models');
module.exports = {
index: function(req, res){
var viewModel = {
groups: []
};
Models.Group.find({}, function(err, groups){
if(err){
throw err;
}else{
viewModel.groups = groups;
res.render('addGroup', {title: 'Admin Add Product Group', adminloggedin: true, subtitle: 'Add a Group', underheaderp: ''});
}
});
},
create: function(req, res){
var saveGroup = function(){
Models.Group.find({}, function(err, groups){
if(groups.length > 0){
saveGroup();
}else{
Models.Group.find({},function(err, groups){
if(err){
throw err;
}else{
var newGrp = new Models.Group({
groupName: req.body.groupname
});
newGrp.save(function(err, group){
console.log('Successfully inserted Group');
res.redirect('admin/addGroup');
});
}
});
}
});
};
saveGroup();
}
};
My current Routes:
var express = require('express'),
router = express.Router(),
addGroup = require('../controllers/addGroup');
module.exports = function(app){
router.get('/admin/addGroup', addGroup.index);
router.post('/admin/addGroup', addGroup.create);
app.use(router);
}
And my addGroup handlebars page
<!-- Add a Product Group Form -->
<div class="row">
<div class="col-md-6">
<form action="/admin/addGroup" method="post">
<fieldset class="form-group">
<label for="newGroupName">Group Name:</label>
<input type="text" class="form-control" name="groupname">
</fieldset>
<fieldset class="form-group">
<label for="groupImageFolder">Image Folder Name:</label>
<input type="text" class="form-control" name ="groupImageFolder">
</fieldset>
<button type="submit" class="btn btn-success" type="button">Add Group</button>
</form>
</div>
</div>
Unfortunately, I have yet to find a great way to debug my applications as I am still a new programmer. Any recommendations would be great as well.
The problem must be in my controller :create
Possibly where I am defining my var newGrp and trying to set it to my group models?
How can I fix this to make it so it saves the inputted data to MongoDB?
Any help is greatly appreciated.
Related
Sorry if this is super obvious, but I'm new to coding. I'm using node.js, express, mongoose and mongodb to try and add an update function to my app to make it CRUD by adding an edit button. Whenever I click the edit button though it still just deletes the item as if I were clicking the checkbox. I'm thinking it's because I'm calling the item from the same form of "pending items" but it seems like my update code isn't even registering as my console.logs for //Edit items aren't logging.
I want it to identify the item by its id when its edit button is submitted (then put the item in the newTask input to be edited and resubmitted as an update but I haven't figured out how to link those 2). I know the code is wonky, I'm just trying to figure out how to put this together, so thanks for any help!
<div class="box">
<!-- Item add function -->
<% newListItems.forEach(function(item){ %>
<!-- Form for pending items -->
<form action="/update" method="post">
<!-- Items -->
<div class="item">
<input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
<button type="submit" class="editItmbtn" name="editItembtn">E</button>
<p><%=item.name%></p>
</div>
<input type="hidden" name="listName" value="<%= listTitle %>"></input>
</form>
<% }) %>
<!-- End pending items -->
<!-- Form to add items -->
<form class="item" action="/" method="post">
<input type="text" name="newTask" id="id" placeholder="Add new task..." autocomplete="off">
<button type="submit" name="list" value="<%= listTitle %>">+</button>
</form>
</div>
''//Requirements
const express = require("express");
const session = require("express-session")//for sessions
const favicon = require("serve-favicon"); //for favicon
const path = require("path");// for favicon
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser"); //for sessions
const mongoose = require("mongoose"); const _ = require("lodash");
const MongoStore = require("connect-mongo")(session);
const app = express();
// Edit items
app.put("/update", function(req, res) {
const itemName = req.body.newTask;
const taskID = req.body.editItmbtn;
const userInput = req.body.id;
Item.useFindAndModify(taskID), {
$set: {"/update": userInput}}, {new: true},
(err, result) => {
if (err) {
console.log("ERROR");
} else {
res.redirect("/");
res.render("list", {
listTitle: "Tasks",
newListItems: foundItems
});
}
}
});
// Delete checked items
app.post("/update", function(req, res) {
const checkedItemId = req.body.checkbox;
const listName = req.body.listName;
if (listName === "Tasks") {
Item.findByIdAndRemove(checkedItemId, function(err) {
if (!err) {
console.log("Successfully deleted checked item.");
res.redirect("/");
}
});
} else {
List.findOneAndUpdate({
name: listName
}, {
$pull: {
items: {
_id: checkedItemId
}
}
}, function(err, foundList) {
if (!err) {
res.redirect("/" + listName);
}
});
}
});
In your form you are using the method="post" which means that the request will be submitted to your app.post("/update" ..... ) , that is why you always land there, where you delete your item.
You have to do two things:
Change the app.put('/update' ...) to app.post('/update' ...)
Change the app.post('/update' ... which is meant to delete the item to something semantically more relevant like maybe app.post('/delete' ... and change the frontend with which you delete method respectively.
You have app.put("/update", function(req, res) in Express but <form action="/update" method="post"> in your form, which matches your delete route.
For your second question, there are many ways to populate your item form in Javascript, but there might be an even more efficient way if you tell us if you're using a framework.
Your form always submit the http request with the "POST" method, but in your code the app.post("update") deletes the item
So I've been trying to figure out for hours, how to pass an error from a POST route in Express to an EJS template. I'm building a blog app and I want to prevent the redirect to the root route and instead display an error if the title input or text area are empty. Can this be done server-side or do I have to track the inputs on the client-side?
Here is my Compose template:
<form action="/compose" method="POST">
<div class="form-group">
<label for="postTitle">Title</label>
<input type="text" name="postTitle" class="form-control" id="postTitle" autocomplete="off">
<label for="postBody">Post</label>
<textarea name="postBody" class="form-control" autocomplete="off" rows="8"></textarea>
</div>
<button type="submit" name="button" class="btn btn-primary">Publish</button>
</form>
Here's my GET and POST routes:
compose_get: (req, res) => res.render("compose"),
compose_post: (req, res) => {
const postTitle = req.body.postTitle;
const postBody = req.body.postBody;
let postDate = new Date();
const post = new Posts({
date: postDate,
title: postTitle,
content: postBody
});
post.save(err => {
if (!err) {
res.redirect("/");
}
});
}
I am using ObjectReferences and push the comment data to the database but it's not working Even the data is being saved but only 'id' get added, not the user and comment
Main File with Push Method
var Comment = require('./models/comments'),
Camp = require('./models/user');
app.post('/camp/:id/comment', (req,res)=>{
Camp.findById(req.params.id, (err, idf)=>{
if(err){
console.log(err);
}else{
Comment.create(req.body.comment, (err, commentz)=>{
if(err){
console.log(err);
}else{
console.log(commentz + idf);
idf.comments.push(commentz)
idf.save();
res.redirect('/camp/'+ idf._id)
}
})
}
})
})
ObjectReferences user.js
var mongoose = require('mongoose');
var schema = mongoose.Schema;
var blogSchema = new schema({
name : String,
email : String,
descr : String, // TEMPORERY
posts: [
{
type: mongoose.Schema.Types.ObjectId,
ref: 'Post'
}
],
comments: [
{
type: mongoose.Schema.Types.ObjectId,
ref: 'Comment'
}
]
});
var Camp = mongoose.model("Camp", blogSchema);
module.exports= Camp;
CommentSchema comments.js
var mongoose = require('mongoose');
var schema = mongoose.Schema;
var cSchema = new schema({
user : String,
comment : String,
})
var Comment = mongoose.model("Comment", cSchema);
module.exports =Comment;
Main Form
<form action="/camp/<%=camp._id%>/comment" method="post" class="form-group">
<div class="form-group">
<input class="form-control" type="text" name="comment[user]" value="" placeholder="Name">
</div>
<div class="form-group">
<textarea class="form-control" style="height:100px" type="text" name="comment[comment]" value="" placeholder="Your Comment"></textarea>
</div>
<div class="form-group">
<button class="btn btn-primary btn-large btn-block" type="submit" name="submit"> SUBMIT</button>
</div>
</form>
The only ID added to the user's database, not all comments and in the comment, collection data added perfectly
I think instead of using commentz use commentz._id and have a callback for .save. It should work.
console.log(commentz + idf);
idf.comments.push(commentz._id)
idf.save(function(err){
if(err){
// handle error
}
res.redirect('/camp/'+ idf._id)
});
im currently trying to create an event to and store it in my mongo database. Below is my current event schema.
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
//blueprint for each new entry in the db
var eventSchema = new Schema({
eventName: {type:String},
eventDate: {type:String},
eventPlace:{type:String},
eventPrice: {type: Number}
});
module.exports = mongoose.model('Event', eventSchema);
Here is my create function code in my user.js file
// /route for new event
router.get('/newEvent', function (req,res,next) {
var messages = req.flash('error');
res.render('user/newEvent',{csrfToken: req.csrfToken(),messages: messages, hasErrors: messages.length >0});
});
//route for new event save
router.get('/createEvent', function(req, res, next) {
var event = new Event();
eventName = req.body.eventName;
eventDate = req.body.eventDate;
eventPlace = req.body.eventPlace;
eventPrice = req.body.eventPrice;
event.save(function(err) {
if(err) return next(err);
res.json({ message : 'Success!'});
});
});
And here is my form to create the new event in my newEvent.hbs file.
<div class = "row">
<div class="col-md-4 col-md-offset-4">
<h1> Create a new Event</h1>
{{#if hasErrors}}
<div class=alert alert-danger">
{{# each messages}}
<p>{{this}}</p>
{{/each}}
</div>
{{/if}}
<form action="/user/newEvent" method="post">
<div class="form-group">
<label for="eventName">Event Name</label>
<input type="text" id="eventName" name="eventName"class="form-control">
</div>
<div class="form-group">
<label for="eventDate">Event Date</label>
<input type="text" id="eventDate" name="eventDate" class="form-control">
</div>
<div>
<label for="eventPlace">Place of Event</label>
<input type="text" id="eventPlace" name="eventPlace" class="form-control">
</div>
<div>
<label for="eventPrice">Price of Event: €</label>
<input type="text" id="eventPrice" name="eventPrice" class="form-control">
</div>
<input type="hidden" name="_csrf" value="{{ csrfToken}}">
Create Event
</form>
</div>
So far when i run the code I get an error stating that the eventName, eventPlace, eventDate and eventPrice are required and havent been entered but when i remove the "required:true" from the events schema a new event is created but no data is stored in the database.
1- You are not saving the events correctly eventName = req.body.eventName
currently you are saving empty object, thats why when you remove required it save empty data.
2- You are also using req.body with get request you should be using router.post
Check the code below
router.post('/createEvent', function(req, res, next) {
var event = new Event({
eventName:req.body.eventName,
eventDate : req.body.eventDate,
eventPlace : req.body.eventPlace,
eventPrice : req.body.eventPrice
});
event.save(function(err) {
if(err) return next(err);
res.json({ message : 'Success!'});
});
});
I am creating a Restful API on Node.js and storing data into Mongodb. and working on user registration API.
app.js
apiRoutes.post('/signup', function(req, res) {
if (!req.body.name || !req.body.password) {
res.json({success: false, msg: 'Please pass Name and Password.'});
} else {
var newUser = new User({
name:req.body.name,
password:req.body.password
});
console.log(req.body.name);
// save the user
newUser.save(function(err, data) {
if (err) {
return res.json({success: false, msg: 'Username already exists.'});
}else{
console.log(data);
res.json({success: true, msg: 'Successful created new user.'});}
});
}
});
Consuming API using Angular.js
//factory for user register
app.factory('RegistrationFactory', function($resource){
return $resource('/api/signup/:id',{id:'#_id'},{update:{method:'PUT'}});
});
//controller for registration
app.controller('registerCtrl', function($scope, RegistrationFactory, $location){
$scope.regUser=new RegistrationFactory();
$scope.register=function(){
console.log($scope.newUser);
$scope.regUser.$save(function(){
console.log("User Registerd");
});
} ;
})
register.html
<div class="post" ng-controller="registerCtrl">
<form method="post">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" ng-model="newUser.name" />
</div>
<div class="form-group">
<label>Password</label>
<input type="text" class="form-control" name="password" ng-model="newUser.password"/>
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="register()">Register</button>
</div>
</form>
</div>
So, My problem is that, this API is working fine on POSTMAN but its not working on my HTML form. Please review my code. Whenever I click on Register button its seems like that on button click API is not hitting. nothing is happening.
Please review my code and suggest me solution.
Thanks.
from angular controller you are not passing the newUser object to $resource or regUser change the controller code to below
//controller for registration
app.controller('registerCtrl', function($scope, RegistrationFactory, $location){
$scope.register=function(){
console.log($scope.newUser);
$scope.regUser=new RegistrationFactory($scope.newUser);
$scope.regUser.$save(function(){
console.log("User Registerd");
});
} ;
})