How to render an HTML page with JSON data in ExpressJS

Question

I've been trying to build an anime app by getting data from an API Wrapper (api.jikan.moe). I've made a form in an HTML form to send post data, then my node.js script gets the data from the API.

How do I render the JSON and display the json data in the form of an HTML page?

Here's my code index.html

<form  method="POST" action="http://127.0.0.1:3000/find">
        <div class="form">
                <input type="text" name="animeName" placeholder="Anime Name"><input type="submit" value="Search" id="searchBtn">
        </div>
    </form>

main.js

app.post('/find', (req, res) => {
mal.search('anime', req.body.animeName, '')
    .then(info => {
        let list = []
        for(var i = 0; i < info.results.length; i++){
            list.push(info['results'][i])
        }
        res.json(info)
    })
    .catch(err => {
        console.log(err)
        res.send("Error Occured")
    })
})

Answer 1

When you submit the form, the form data is sent to the server and the page is refreshed.

You will have to use AJAX to submit the form.