Page needs to be refreshed to load the data from an API in Node

So I’m building a simple web app that gets data from an API that needs to be displayed on the screen.

However after the Post request is made, the data from the API gets logged through the console.log() however it does not get displayed on the screen though I’ve got the correct code, it gets displayed after a manual refresh.

I’m using EJS to display the API data on the screen.

The app.js has the following:

var cityName='';
var temperature='';
var pressure='';

app.get('/',function(req,res){
  res.render('home');
 });


app.get('/results',function(req,res){
res.render('results',{
  cityName: cityName,
  pressure:pressure,
  temperature:temperature,
}
);
});


app.post('/',function(req,res){

  cityName=req.body.cityName;
  const api_url= 'https://api.openweathermap.org/data/2.5/weather?q='+ cityName +'&appid=8bb235e1990db4b5ae16f92e920bad25';
  

  https.get(api_url,function(output){
   //console.log(output);
 
   output.on('data', function(data){
    const weatherData= JSON.parse(data);
 
    // WEATHER
     temperature=Number(weatherData.main.temp)-273.15;
     pressure= Number(weatherData.main.pressure);

    console.log('Temparature:'+temperature+' °C');
    console.log('Pressure:'+pressure + ' hPa');
  });
    
}); 
  res.redirect('/results');
});


let port = process.env.PORT;
if (port == null || port == "") {
  port = 3000;
}
app.listen(port, function(){
  console.log("Server ativated at port successfully");
});

The results.ejs file simply has the following:

<div class="container">
<div class="card-deck">
    <div class="card bg-light mb-3" >
        <div class="card-header">City</div>
        <div class="card-body">
          <ul>
            <li><p class="card-text" name="cityName">City Name: <%= cityName %>.</p></li>
            <li><p class="card-text" name="temperature">Temperature: <%= temperature %> °C.</p></li>
            <li><p class="card-text" name="pressure">Pressure: <%= pressure %> hPa.</p></li>
          </ul>
          </div>
      </div> 
      </div>
  </div>  

The home.ejs file has:

<div class="container1 container">
    <form method="post" action="/">
      <div class="brand-logo"></div>
      <div class="brand-title">WEATHER MONITORING</div>
    
      <div class="inputs">
        <label>CITY NAME</label>
        <input autocomplete="off" name="cityName" type="text" placeholder="Mumbai" />
        <button type="submit">CHECK</button>
    </form>   
</div>    

>Solution :

You redirect the user before the data loads

Move your redirect inside the callback

app.post("/", function (req, res) {
  cityName = req.body.cityName;
  const api_url =
    "https://api.openweathermap.org/data/2.5/weather?q=" +
    cityName +
    "&appid=8bb235e1990db4b5ae16f92e920bad25";

  https.get(api_url, function (output) {
    //console.log(output);

    output.on("data", function (data) {
      const weatherData = JSON.parse(data);

      // WEATHER
      temperature = Number(weatherData.main.temp) - 273.15;
      pressure = Number(weatherData.main.pressure);

      console.log("Temparature:" + temperature + " °C");
      console.log("Pressure:" + pressure + " hPa");
      res.redirect("/results");
    });
  });
});