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

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 >
<div >
    <div  >
        <div >City</div>
        <div >
          <ul>
            <li><p  name="cityName">City Name: <%= cityName %>.</p></li>
            <li><p  name="temperature">Temperature: <%= temperature %> °C.</p></li>
            <li><p  name="pressure">Pressure: <%= pressure %> hPa.</p></li>
          </ul>
          </div>
      </div> 
      </div>
  </div>

The home.ejs file has:

<div >
    <form method="post" action="/">
      <div ></div>
      <div >WEATHER MONITORING</div>
    
      <div >
        <label>CITY NAME</label>
        <input autocomplete="off" name="cityName" type="text" placeholder="Mumbai" />
        <button type="submit">CHECK</button>
    </form>   
</div>

CodePudding user response：

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