title: MVC Express - Data does not carry over in view once form is submitted
body: <p>I am working on a very basic weather app to learn MVC architecture. However, I am having an issue with my page reloading once I submit the form and then data from that submission not coming over into the next newly rendered page.</p>
  <p>Most of my logic for my page is in my controller.js file. In my view I have a form where the user fills in a city, and then my getWeather function makes an API call where it gets the city's temperature. From there my controller.js should re-render the index page, but pass in the string <code>It is currently ${temp} °F in ${city}.</code></p>
  <p>At least, that's how its supposed to work. Unfortunately when the page reloads the weather const is null and I then have my function catch the error and give me the message &quot;that city is not available&quot;.</p>
  <p>I have tested my API to make sure that it is correctly retrieving the data, by console.logging the res object, and I am getting that perfectly.</p>
  <p>Also, I should note I bring in Weather function from my model. The only thing it does is test to see if the user inputted anything into the form and if they didn't it creates the error &quot;Please enter the name of the city.&quot; I don't think it is the source of my issue or the fix for it.</p>
  <p>I guess what I'm looking for is a way to prevent my page from reloading when I submit the form, or a way to not lose the data in my function when the page reloads. Any help would be greatly appreciated!</p>
  <pre><code>const axios = require('axios')
  const API_KEY= &quot;8d130a4fe5369b01d1fe629bccbe0926&quot;;
  
  const Weather = require(&quot;../model/Weather&quot;)
  
  exports.renderHomePAge = (req, res) =&gt; {
      res.render(&quot;index&quot;)
  }
  
  exports.getWeather = (req, res, ) =&gt; {
      const city = req.body.city
  
      const url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&amp;appid=${API_KEY}&amp;units=imperial`
  
      const weather = new Weather(city)
  
      weather.validateUserInput()
  
      if(weather.errors.length){
          res.render(&quot;index&quot;, {error: weather.errors.toString()})
      } else {
          axios.get(url)
          .then((response)=&gt;{
              // console.log(response)
              const {temp} = response.data.main
              const {city} = response.data.city
              res.render(&quot;index&quot;, {
                  weather: `It is currently ${temp} °F in ${city}.`
              })
          })
          .catch((err) =&gt;{
              console.log(err)
               res.render(&quot;index&quot;, {
                  weather: `That city is not avaible`
              })
          })
      }
  
      
  } 
  
  exports.renderAboutPAge = (req, res) =&gt; {
      res.render(&quot;About&quot;)
  }
  </code></pre>
  <p>I don't think its neccessary for this issue, but just incase here is my index.hbs file:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
      &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
      &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;
      &lt;title&gt;Weather | Home&lt;/title&gt;
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot;&gt;
          &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot;
              aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
              &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
              &lt;ul class=&quot;navbar-nav&quot;&gt;
                  &lt;li class=&quot;nav-item active&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; href=&quot;/&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class=&quot;nav-item&quot;&gt;
                      &lt;a class=&quot;nav-link&quot; href=&quot;/about&quot;&gt;About&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;!-- Page Content --&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-lg-12 text-center main&quot;&gt;
                  &lt;div&gt;
                      &lt;h1 class=&quot;mt-5&quot;&gt;MVC Weather Finder&lt;/h1&gt;
                      &lt;p class=&quot;lead&quot;&gt;Enter the name of the city and press search!&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;form action=&quot;/&quot; method=&quot;post&quot;&gt;
                          &lt;input name=&quot;city&quot; type=&quot;text&quot;&gt;
                          &lt;button&gt;Go!&lt;/button&gt;
                      &lt;/form&gt;
                      &lt;div class=&quot;mt-3&quot;&gt;
                          {{weather}}
                          {{error}}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>