Node JS Tutorial in Hindi #51 Populate Form with API Data using ID | Get API with Params & MongoDB

Populate data with API in form


  1. Make get route
  2. Get id from params
  3. Fetch data from db with Id
  4. Populate data in form
  5. Test Flow and DB
  6. Interview Questions
  7. Notes, Code and playlist.


index.js


import express from 'express'
import { MongoClient, ObjectId } from 'mongodb';

const dbName="school"
const url ="mongodb://localhost:27017"
const client= new MongoClient(url)


const app = express();
app.use(express.urlencoded({extended:true}))
app.use(express.json());

app.set("view engine",'ejs')
client.connect().then((connection)=>{
const db =connection.db(dbName);

app.get("/api",async (req,resp)=>{
const collection =db.collection("students")
const students= await collection.find().toArray();
resp.send(students)
})
app.get("/ui",async (req,resp)=>{
const collection =db.collection("students")
const students= await collection.find().toArray();
resp.render('students',{students})
})

app.get('/add',(req,resp)=>{
resp.render('add-student')
})

app.post("/add-student",async (req,resp)=>{
// console.log(req.body);
const collection =db.collection("students")
const result= await collection.insertOne(req.body)
console.log(result);
// const students= await collection.find().toArray();
resp.send("data saved")
})

app.post("/add-student-api",async(req,resp)=>{
console.log(req.body);
const {name,age,email}= req.body;
if(!name || !age || !email){
resp.send({message:"operation failed",success:false})
return false
}
const collection = db.collection("students");
const result = await collection.insertOne(req.body)
resp.send({message:"data stored",success:true,result:result})
})

app.delete("/delete/:id",async (req,resp)=>{
console.log(req.params.id);
const collection = db.collection("students")
const result = await collection.deleteOne({_id: new ObjectId(req.params.id)})
if(result){
resp.send({
message:"student data deleted",
success:true
})
}else{
resp.send({
message:"student data not deleted, try after sometime",
success:false
})
}
})

app.get("/ui/delete/:id",async (req,resp)=>{
console.log(req.params.id);
const collection = db.collection("students")
const result = await collection.deleteOne({_id: new ObjectId(req.params.id)})
if(result){
resp.send("<h1>Student record deleted<h1>")
}else{
resp.send("<h1>Student record not deleted<h1>")
}
})

})

// app.set("view engine",'ejs')

app.listen(3200)


views/students.ejs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Data will be here</h1>

<table border="1">
<tr>
<td>Name</td>
<td>Age</td>
<td>Email</td>
<td>Operation</td>

</tr>

<% students.forEach(student=>{ %>
<tr>
<td><%= student.name %></td>
<td><%= student.age %></td>
<td><%= student.email %></td>
<td><a href="/ui/delete/<%= student._id %>">Delete</a></td>
<td><a href="/ui/student/<%= student._id %>">Update</a></td>
</tr>
<% }) %>
</table>
</body>
</html>


views/update-student.ejs


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Students</title>
</head>
<body>
<form method="post" action="">
<input type="text" name="name" value="<%= result.name %>" placeholder="enter student name" />
<br/><br/>
<input type="text" name="email" value="<%= result.email %>" placeholder="enter student email" />
<br/><br/>
<input type="text" name="age" value="<%= result.age %>" placeholder="enter student age" />
<br/><br/>
<button>Update Student</button>
</form>
</body>
</html>