nodejs form not sending any data back in req.body.blog

Question

I am creating this blog app from web developer bootcamp annd i am struck in this error where the form to create new blog is not sending any data back to the database and the database is saving it empty. i am using mongodb and when i see my database it is storing empty objects. here is te code for app.js

var express = require("express"),
app = express(),
bodyparser = require("body-parser"),
mongoose = require("mongoose");

mongoose.connect("mongodb://localhost/restful", {
useMongoClient:true
});

app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(bodyparser.json());

// app.use(bodyparser.json({ type: 'application/vnd.api+json' }));
app.use(bodyparser.urlencoded({extended:true}));

//MONGOOSE MODEL CONFIG
//=================================
var blogSchema = new mongoose.Schema({
title: String,
image: String,
body: String,
created: Date //{type: Date, default : Date.now}

});

var blog = mongoose.model("blog" , blogSchema);

// blog.create([{
//     title: "test post",
// image : 
"https://imagejournal.org/wpcontent/uploads/2017/08/17140945161_586d5e98f7_o-600x300.jpg",
//     body : "This is the first post"
// },
// {
//   title: "second Post",
//   image: "https://images.pexels.com/photos/33109/fall-autumn-red-
season.jpg?h=350&auto=compress&cs=tinysrgb",
//   body: "this is a second post"
// }]
// );

//RESTful routes
//==========================================
//==========================================

//Home

app.get("/",function(req,res){
res.redirect("/blogs");
})
//NEW ROUTE

app.get("/blogs/new",function(req,res){
  res.render("new");
});

//CREATE ROUTE
 app.post("/blogs", function(req,res){
//create blogs
blog.create(req.body.blog, function(err, newblog){
if(err){
 console.log("This is if error " + err);
res.render("new");
}
else{
//then redirect to the INDEX
res.redirect("/blogs");
console.log("This is if no error " + req.body.blog + "  "+ err );
 }
});
});

//SHOW ROUTE
app.get("/blogs/:id", function(req,res){
 blog.findById(req.params.id, function(err,foundblog){
 if(err){
   res.redirect("/blogs");
 }
 else{
   res.render("show", {blog: foundblog});
 }
 });
});

//INDEX ROUTE
app.get("/blogs", function(req,res){
blog.find({}, function(err,blogs){
    if(err)
        {
            console.log("error");
        }
    else
        {
               res.render("index", {blogs:blogs});

        }
    })
});



//listening port

app.listen(3000,function(){
  console.log("Blog app running");
})

And the code for the form is this :

<% include ./partials/header.ejs %>

<div class="ui main text container segment">
<div class="ui huge header">New Blog</div>
<form class="ui form" action="/blogs" method="POST">
<div class="field">
  <label>Title</label>
  <input type="text" name="blogtitle" placeholder="title">
</div>
<div class="field">
  <label>Image</label>
<input type="text" name="blogimage" placeholder="image">
</div>
<div class="field">
<label>Body</label>
<textarea name="blogbody" placeholder="Blog body goes here"></textarea>
</div>
<input class="ui inverted big olive button" type="submit" >
</form>

</div>

<% include ./partials/footer.ejs %>

Now the console is printing " This is if no error undefined null "

now what i did is i passed

blog.create({ name: req.body.blogtitle, image:req.body.blogimage, body: 
req.body.blogbody} , function(err, newblog){...});

this seems to be working but if I had many parameter in Schema should i have to declare this one by one? In the course colt just typed req.body.blog and said that it contains all the data.

Please help me!

Answer 1

According to your HTML inputs you will get the req.body like:

{ 
    blogtitle: 'your_blog_title',
    blogimage: 'your_blog_image',
    blogbody: 'your_blog_body' 
}

Hence you have to use it in the code below for every model and every field.

blog.create({
    name: req.body.blogtitle,
    image: req.body.blogimage, 
    body: req.body.blogbody
},function(err, newblog){...});

But if you want to just use directly

// validate req.body.blog
blog.create(req.body.blog, function(err, newblog){...});

then you would have to define you html something like model[field], sample code below.

<form class="ui form" action="/blogs" method="POST">
  <div class="field">
    <label>Title</label>
    <input type="text" name="blog[title]" placeholder="title">
  </div>
  <div class="field">
    <label>Image</label>
    <input type="text" name="blog[image]" placeholder="image">
  </div>
  <div class="field">
    <label>Body</label>
    <textarea name="blog[body]" placeholder="Blog body goes here"></textarea>
  </div>
  <input class="ui inverted big olive button" type="submit" >
</form>

Please notice in order to use req.body.blog directly; you have to give the same field(column name) to the html inputs.

Answer 2

I think your missed the input names. It should be like blogtitle, blogimage and blogbody when you use it on your server side code. req.body is populated like this:

 { blogtitle: 'your_blog_title',blogimage: 'your_blog_image',blogbody: 'your_blog_body' }

So you have to grab them like req.body.blogtitle

//CREATE ROUTE
app.post("/blogs", function(req,res){
//create blogs
blog.create(req.body.blogtitle, function(err, newblog){
if(err){
  console.log("This is if error " + err);
  res.render("new");
}
else{
//then redirect to the INDEX
  res.redirect("/blogs");
  console.log("This is if no error " + req.body.blogtitle + "  "+ err );
 }
});
});

Answer 3

The properties of req.body corresponds to the name attributes of the input fields in your <form>. req.body.blog is undefined because you don't have an input element with name="blog".

Try console.log-ing req.body to see its properties so that you know which properties to use. But basing on your <form>, req.body would only have blogtitle, blogimage and blogbody.