title: Fetching data from an API then sending it to an EJS file
body: <p>I'm trying to send a json objectfetched with the fetch-api to an EJS file which loads when someone vists the website. The issue is I'm getting that the object sent is undefined by the time the page loads since it takes some time for the data to be fetched.</p>
  
  <p>I could wrap the res.render with async and await to wait for the data to be fetched then render the page but this would slow down the website loading time. I want there to be a default value in the ejs file until the one from the api is fetched.</p>
  
  <pre><code>//One of the routes
  router.get("/", (req, res) =&gt; {
  fetchData(object =&gt; {
  res.render("landingPage", { obj: object });
  })
  
  });
  
  function fetchData(callback){
  fetch("http://localhost:3000/api/teachers") //Could change this to a find request to the data base directly like Teacher.find()...
      .then(res =&gt; res.json())
      .then(res =&gt; {
        return callback(res);
      })
      .catch(err =&gt; {
        console.log(JSON.stringify(err));
      });
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!--In the HTML file--&gt;
  &lt;h5&gt;&lt;%= obj.someValue %&gt;&lt;/h5&gt;
  </code></pre>
  
  <p>In the code I provided the server waits for the data to be fetched then renders the page. I want the page to load and when the fetching is done it adds the fetched object to the page. How could I do that?</p>