使用车把不工作将对象数组传递给 express js 中的部分视图
Passing over array of object to partial view in expressjs using handlebars not wokring
这是我第一次使用 JS 框架,我尝试使用 handlebars 视图引擎将对象数组传递给局部视图,但页面上没有显示任何内容。
我在其他页面上用不同的数组做了同样的事情并且它有效,但似乎不适用于这个特定的数据而且我不知道为什么。请帮忙
app.post('/building-works', (req, res) => {
let theProjects = shared.projects;
let dataObject = {};
let theArray = [];
const search = req.body.searchWork;
for(let projects of theProjects){
if((search === projects.state)){
dataObject.state = projects.state;
dataObject.lga = projects.lga;
for(let localG of projects.lga){
dataObject.lga = projects.lga;
dataObject.communties = localG.communities;
theArray.push(dataObject);
}
}
for(let lga of projects.lga){
if(search === lga.lgaName){
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){
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);
}
}
}
}
if(!res.locals.projects) res.locals.projects = {};
res.locals.projects = theArray;
console.log(theArray);
res.render('building-works', {title: 'Building Works'});
});
这是部分文件
<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}}
在处理程序的 res.render 部分,将数组作为模板数据对象的一部分传递给模板
...
res.render('building-works', {title: 'Building Works', theArray});
...
这是我第一次使用 JS 框架,我尝试使用 handlebars 视图引擎将对象数组传递给局部视图,但页面上没有显示任何内容。 我在其他页面上用不同的数组做了同样的事情并且它有效,但似乎不适用于这个特定的数据而且我不知道为什么。请帮忙
app.post('/building-works', (req, res) => {
let theProjects = shared.projects;
let dataObject = {};
let theArray = [];
const search = req.body.searchWork;
for(let projects of theProjects){
if((search === projects.state)){
dataObject.state = projects.state;
dataObject.lga = projects.lga;
for(let localG of projects.lga){
dataObject.lga = projects.lga;
dataObject.communties = localG.communities;
theArray.push(dataObject);
}
}
for(let lga of projects.lga){
if(search === lga.lgaName){
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){
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);
}
}
}
}
if(!res.locals.projects) res.locals.projects = {};
res.locals.projects = theArray;
console.log(theArray);
res.render('building-works', {title: 'Building Works'});
});
这是部分文件
<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}}
在处理程序的 res.render 部分,将数组作为模板数据对象的一部分传递给模板
...
res.render('building-works', {title: 'Building Works', theArray});
...