0

This is my first time using JS framework, I am trying to pass over an array of object to a partial view using handlebars view engine, but nothing is showing on the page. I did the same on other page with different array and it worked, but doesn't seem to work with this particular data and I don't know why. Please help.

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'});
});

This is partial file

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

1 Answer 1

1

In the res.render part of your handler, pass theArray as part of the data object for the template


...
res.render('building-works', {title: 'Building Works', theArray});
...

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.