'How do I update an array of object property value with input form in javascript?
I'm currently learning node.js, express.js and handlebars
I have 2 forms, add form and edit form to make a blog/news kind of page
/addproject:
app.get('/addproject', function(req, res) {
res.render('addproject', { title: "Add Project", apActive: true, active: "active" })
})
app.post('/addproject', function(req, res) {
const projectImage = req.body.projectImage;
const projectTitle = req.body.projectTitle;
const projectContent = req.body.projectContent;
const projectDate = {
startDate: req.body.projectStartDate,
endDate: req.body.projectEndDate
}
const projectTech = {
checkHtml: req.body.checkHtml,
checkNode: req.body.checkNode,
checkCss: req.body.checkCss,
checkReact: req.body.checkReact
}
let month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
]
let endDate = new Date(projectDate.endDate)
let startDate = new Date(projectDate.startDate)
function getProjectDuration(endDate, startDate) {
endDate = new Date(projectDate.endDate)
startDate = new Date(projectDate.startDate)
const distance = endDate - startDate
const miliseconds = 1000
const secondInMinute = 60
const minuteInHour = 60
const secondInHour = secondInMinute * minuteInHour // 3600
const hourInDay = 23
const dayInMonth = 30
let dayDistance = distance / (miliseconds * secondInHour * hourInDay)
if (dayDistance >= 30) {
return `${Math.floor(dayDistance / dayInMonth)}` + ` Bulan`
} else {
return `${Math.floor(dayDistance)}` + ' Hari'
}
}
const projectDetailDate = {
edDate: endDate.getDate(),
edMonth: month[endDate.getMonth()],
edYear: endDate.getFullYear(),
sdDate: startDate.getDate(),
sdMonth: month[startDate.getMonth()],
sdYear: startDate.getFullYear()
}
const projectDuration = getProjectDuration()
const projectData = {
projectImage,
projectTitle,
projectContent,
projectDate,
projectDuration,
projectTech,
projectDetailDate
}
project.push(projectData)
res.redirect('/')
})<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
{{> navbar}}
<!--ADD PROJECT-->
<div class="ap-title my-5">
<p>ADD PROJECT</p>
</div>
<div class="ap-form m-auto">
<form action="/addproject" method="POST">
<div class="mb-3">
<label for="projectInputName" class="form-label">Project Name</label>
<input type="text" class="form-control" id="projectInputName" aria-describedby="emailHelp" name="projectTitle">
</div>
<div class="mb-3 d-flex" style="gap: 10px;">
<div class="start-date w-100">
<label for="projectInputStartDate" class="form-label">Start Date</label>
<input type="date" class="form-control" id="projectInputStartDate" name="projectStartDate">
</div>
<div class="end-date w-100">
<label for="projectInputEndDate" class="form-label">End Date</label>
<input type="date" class="form-control" id="projectInputEndDate" name="projectEndDate">
</div>
</div>
<div class="mb-3">
<label for="projectDescription">Description</label>
<textarea id="projectDescription" class="form-control" name="projectContent"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" name="projectImage" hidden />
</div>
</div>
<div class="ap-btn text-end">
<button type="submit">Submit</button>
</div>
</form>
</div>
<!--ADD PROJECT END-->
</body>
</html>/editproject:
app.get('/editproject/:id', function(req, res) {
let data = req.params.id
let edit = project[data]
res.render('editproject', { title: 'Edit Project', editForm: edit })
})
app.post('/editproject', function(req, res) {
let projectEdit = project.map(function(data) {
return {
...data = req.body
}
})
project.push(projectEdit)
res.redirect('/')
})<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
{{> navbar}}
<!--ADD PROJECT-->
<div class="ap-title my-5">
<p>EDIT PROJECT</p>
</div>
<div class="ap-form m-auto">
<form action="/editproject" method="POST">
<div class="mb-3">
<label for="projectInputName" class="form-label">Project Name</label>
<input type="text" class="form-control" id="projectInputName" value="{{ editForm.projectTitle }}" aria-describedby="emailHelp" name="projectTitle">
</div>
<div class="mb-3 d-flex" style="gap: 10px;">
<div class="start-date w-100">
<label for="projectInputStartDate" class="form-label">Start Date</label>
<input type="date" class="form-control" id="projectInputStartDate" name="projectStartDate">
</div>
<div class="end-date w-100">
<label for="projectInputEndDate" class="form-label">End Date</label>
<input type="date" class="form-control" id="projectInputEndDate" name="projectEndDate">
</div>
</div>
<div class="mb-3">
<label for="projectDescription">Description</label>
<textarea id="projectDescription" class="form-control" name="projectContent">{{ editForm.projectContent }}</textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" name="checkHtml" {{#if editForm.projectTech.checkHtml}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode" {{#if editForm.projectTech.checkNode}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss" {{#if editForm.projectTech.checkCss}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact" {{#if editForm.projectTech.checkReact}} checked {{/if}}>
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="edit-img">
<img src="/public/assets/{{ editForm.projectImage }}" alt="">
</div>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" name="editImage" onChange={data => editForm(data)} hidden />
</div>
</div>
<div class="ap-btn text-end">
<button type="submit">Submit</button>
</div>
</form>
</div>
<!--ADD PROJECT END-->
</body>
</html>/index (blog thumbnail only):
app.get('/', function(req, res) {
let cardData = project.map(function(data) {
return {
...data
}
})
res.render('index', {
title: "Home",
homeActive: true,
active: "active",
card: cardData,
})
})<!--MP = My Project-->
<div class="mp-container">
<div class="mp-title mb-5">
<p>My Project</p>
</div>
<div class="mpc-container">
<div class="row">
{{#each card}}
<div class="col-3 mp-card mx-5">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="public/assets/{{ this.projectImage }}" alt="Thumbnail Image">
</div>
<div class="mpc-title">
<a href="/project-detail/{{ this.projectTitle }}" action="/project-detail" target="_blank">
<p>{{ this.projectTitle }}</p>
</a>
<small>Durasi: {{ this.projectDuration }}</small>
</div>
<div class="mpc-content">
{{ this.projectContent }}
</div>
<div class="mpc-icons">
{{#if this.projectTech.checkHtml}} <i class="fa-brands fa-html5"></i> {{/if}}
{{#if this.projectTech.checkCss}} <i class="fa-brands fa-css3-alt"></i> {{/if}}
{{#if this.projectTech.checkNode}} <i class="fa-brands fa-node-js"></i> {{/if}}
{{#if this.projectTech.checkReact}} <i class="fa-brands fa-react"></i> {{/if}}
</div>
<div class="mpc-mod">
<a href="/editproject/{{ @index }}" action="/edit-project">Edit</a>
<a href="/delete-project/{{ @index }}">Delete</a>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<!--MP END-->/project-detail:
app.get('/project-detail/:projectTitle', function(req, res) {
let data = project.find(item =>
item.projectTitle === req.params.projectTitle
)
res.render('project-detail', { title: "Project Detail", project: data })
})<!DOCTYPE html>
<html lang="en">
{{> head}}
<body>
<!--NAV START-->
{{> navbar}}
<!--NAV END-->
<!--Blog Detail-->
<div id="blog-detail">
<!--BD = Blog Detail-->
<div class="bd-title">
<p>{{ project.projectTitle }}</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class="bd-idc">
<div class="idc-left">
<img src="/public/assets/{{ project.projectImage }}" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div>
<i class="fa-solid fa-calendar-days"></i>
<p class="pt-3">{{ project.projectDetailDate.sdDate }} {{ project.projectDetailDate.sdMonth }} {{ project.projectDetailDate.sdYear }} - {{ project.projectDetailDate.edDate }} {{ project.projectDetailDate.edMonth }} {{ project.projectDetailDate.edYear }} </p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p class="pt-3">{{ project.projectDuration }}</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="tech-body">
{{#if project.projectTech.checkHtml }}
<div class="tech-html">
<i class="fa-brands fa-html5"></i>
<p>HTML</p>
</div>
{{/if}}
{{#if project.projectTech.checkCss }}
<div class="tech-css">
<i class="fa-brands fa-css3-alt"></i>
<p>CSS</p>
</div>
{{/if}}
{{#if project.projectTech.checkNode }}
<div class="tech-node">
<i class="fa-brands fa-node-js"></i>
<p>nodeJs</p>
</div>
{{/if}}
{{#if project.projectTech.checkReact}}
<div class="tech-react">
<i class="fa-brands fa-react"></i>
<p>reactJs</p>
</div>
{{/if}}
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
{{ project.projectContent }}
</p>
</div>
</div>
<!--xBlog Detailx-->
</body>
</html>Main array:
let project = []
All of the js code and main array is placed in one file, looks like this:
let project = [] app.get() app.post()
In /editproject page I use:
let projectEdit = project.map(function(data) { return { ...data = req.body }})
to manipulate the array and updating it based on what I input in edit form with req.body, when I console.log(projectEdit) it shows the updated value but when I use console.log(project) it still doesn't change, the value still the same from /addproject, it only updated in the edit form.
My goal is to update an object form the array (all of the blog content value) by index with the edit form.
Been stuck for hours, I have searched and tried many but nothing works.
Thanks in advance.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|