Express.js使用Handlebars向局部视图传递对象数组不生效问题

问题原因 #

• 变量名不匹配：后端将查询结果赋值给了res.locals.projects，渲染模板时也没有传递theArray变量，但Handlebars模板中遍历的是不存在的theArray，自然不会渲染内容
• 对象引用异常：你在循环外层定义了dataObject = {}，循环中所有修改都是在同一个对象上操作，数组theArray里push的都是这个对象的引用，最终数组所有元素都会被覆盖为最后一次循环的赋值结果
• 模板变量未正确调用：模板遍历后<p>标签里的内容都是写死的静态文本，没有使用Handlebars变量输出语法，就算拿到数据也不会显示对应值
• 拼写错误：代码中出现了communties的拼写错误，正确拼写应为communities，可能导致属性读取失败

修复方案 #

后端代码修复

app.post('/building-works', (req, res) => {
    let theProjects = shared.projects;
    let theArray = [];
    const search = req.body.searchWork;
    for(let projects of theProjects){
        if((search === projects.state)){
            for(let localG of projects.lga){
                // 每次循环新建对象，避免引用共用问题
                let dataObject = {};
                dataObject.state = projects.state;
                dataObject.lga = projects.lga;
                dataObject.communities = localG.communities;
                theArray.push(dataObject);
            }
        }
        for(let lga of projects.lga){
            if(search === lga.lgaName){
                let dataObject = {};
                dataObject.state = projects.state;
                dataObject.lga = lga.lgaName;
                dataObject.communities = lga.communities;
                theArray.push(dataObject);
            }
            for(let communities of lga.communities){
                if(search === communities.community){
                    let dataObject = {};
                    dataObject.state = projects.state;
                    dataObject.lga = lga.lgaName;
                    dataObject.community = communities.community;
                    dataObject.building = communities.projects.building;
                    dataObject.water = communities.projects.water;
                    theArray.push(dataObject);
                }
            }
            
        }
    }
    // 渲染时显式传递theArray变量给模板
    res.render('building-works', {title: 'Building Works', theArray: theArray});
});

局部视图代码修复

<div class="flex flex-col justify-center items-center">
    <h1 class="text-xl w-3/4 text-atasp-mid-red uppercase">Search Projects</h1>
    <form class="mx-auto flex flex-col w-full md:flex-row px-5 py-3 items-center justify-center" action="" method="post">
        <input type="text" name="searchWork" placeholder="search by state, LGA, community or project" class="bg-gray-200 w-3/4 outline-none p-2 rounded-t-md md:rounded-t-none md:rounded-l-md">
        <button type="submit" class="bg-atasp-light-green rounded-b-md w-3/4 md:w-auto text-white md:rounded-bl-none md:rounded-r-md  hover:bg-atasp-dark-green p-2">Search</button>
    </form>
</div>

{{#each theArray}}
    <div>
        <p>{{state}}</p>
        <p>{{lga}}</p>
        <p>{{community}}</p>
        <p>{{building}}</p>
    </div>
{{/each}}

内容的提问来源于stack exchange，提问作者Misbahu Abubakar