如何使用 javascript 中的输入表单更新对象数组 属性 的值?

How do I update an array of object property value with input form in javascript?

我目前正在学习 node.js、express.js 和把手

我有 2 个表单,添加表单和编辑表单以制作 blog/news 类型的页面

/添加项目:

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>

/编辑项目:

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(仅博客缩略图):

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-->

/项目详情:

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>

主数组: let project = []

所有的 js 代码和主数组都放在一个文件中,如下所示:

let project = [] app.get() app.post()

在 /editproject 页面我使用:

let projectEdit = project.map(function(data) { return { ...data = req.body }}) 操作数组并根据我在 req.body 编辑表单中输入的内容更新它,当我 console.log(projectEdit) 它显示更新的值但是当我使用 console.log(project) 它仍然没有改变, /addproject 中的值仍然相同,它仅在编辑表单中更新。

我的目标是使用编辑表单通过索引更新数组中的对象(所有博客内容值)。

卡了几个小时,我搜索并尝试了很多,但没有任何效果。

提前致谢。

您需要更改 URL 以包含项目 ID 然后通过合并两个对象简单地更新项目。

app.post('/editproject/:id', function(req, res) {


    project[req.params.id] = {
        ...project[req.params.id],
        ...req.body
    };

    res.redirect('/')

})

您还需要将id发送给客户端

app.get('/editproject/:id', function(req, res) {

    let data = req.params.id

    let edit = project[data]
    // pass the data as id property and render it so you can use it in the url
    res.render('editproject', { id: data, title: 'Edit Project', editForm: edit })
})