'How to render JSON output from an API on the same webpage in which the user gives the input , preferably in a Div container in Express JS?

So here, I am using NodeJS with Express Js. I have stored the JSON value from an API in a variable and I am trying to show the JSON output on my HTML page, I am actually a beginner in back end development, The only method I have been taught in tutorials is res.send(''); But I want to render the result on the same page preferably on a ResultBox. Can anyone guide me on how can I do that?

Here is my Backend Code

app.post("/iatatracker", function (req, res) {

let apiKey = 'somekey';
let iataQuery = req.body.iatacode;
let airlineIcaoQuery = req.body.flighticao;
let url = `http://api.aviationstack.com/v1/flights?access_key=${apiKey}&airline_icao=${airlineIcaoQuery}&flight_iata=${iataQuery}`;
http.get(url, function (response) {

    response.on('data', function (data) {
        let flightData = JSON.parse(data);
        let flighttxt = JSON.stringify(flightData);
        console.log(flightData);
        const flightIcao = flightData.data[0].flight.icao;
        const flightIata = flightData.data[0].flight.iata;
        const flightNumber = flightData.data[0].flight.number;
        const flightCodeShared = flightData.data[0].flight.codeshared;
        const aircraft = flightData.data[0].aircraft;
        const airlineName = flightData.data[0].airline.name;
        const airlineIcao = flightData.data[0].airline.icao;
        const airlineIata = flightData.data[0].airline.iata;
        let flightDepartureAirport = flightData.data[0].departure.airport;
        let flightDepartureTimezone = flightData.data[0].departure.timezone;
        let flightDepartureDelay = flightData.data[0].departure.delay;
        let flightStatus = flightData.data[0].flight_status;
        
        res.send(` <br>  Airline ICAO : ${airlineIcao} <br> Airline IATA : ${airlineIata} <br> Airline Name ${airlineName} Aircraft : ${aircraft} , Flight Icao : ${flightIcao} <br> Flight Status :  ${flightStatus}  <br> Departure From  : ${flightDepartureAirport} <br> Departure City Timezone : ${flightDepartureTimezone} <br> Flight Delay ( Probably in minutes , I have not read the documentation ^_^ ): ${flightDepartureDelay}`);
        

    });
});

Here is my HTML Form code :

<form class="form" name="iata" action="/iatatracker" method="POST">

    <label for="iatacode"> Enter IATA Code : (for example : 6E881) </label>
    <input type="text" name="iatacode" id="iatacode">

    <label for="flighticao"> Enter Flight ICAO Code : (for eg: igo for Indigo Airlines) </label>
    <input type="text" name="flighticao" id="flighticao">

    <button class="btn" type="submit"> Check Flight History </button>

    <div class="resultbox">
       
    </div>
</form>

Do please let me know if it is possible to render the result in ResultBox or any other similar alternative solution! Any help would be greatly appreciated. Thank you so much in advance



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source