title: Pug template not rendering in browser while sending fetch get request from browser
body: <p>I am working on a small project wherein the data is selected from database datewise.
  For the sake of bravity, I am not including all those database related work here.  I simply
  dive into the problem area.</p>
  <p>I am using:</p>
  <ol>
  <li>Express and Pug at back end</li>
  <li>Fetch API at front end.</li>
  </ol>
  <p>The browser is Chrome</p>
  <p>Code of my front end file - getDates.html - is as under:</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 http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Get Dates&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
  
      &lt;script&gt;
          window.onload = ()=&gt;{
              document.getElementById('confirm').addEventListener('click', sendData)
  
              function sendData(e){
                  e.preventDefault()
  
                  const dates = document.querySelectorAll('input[type=date]')
                  let data = {}
  
                  for (date of dates){
                      data[date.name]= date.value
                  }
  
                  // using fetch to send get request to server 
                  fetch(`/${data.sdate}/${data.edate}`, 
                        { method: 'GET',
                          mode: 'no-cors' } )
                          .catch( err =&gt; console.log(err)  )
              }
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class=&quot;wrapper&quot;&gt;
          &lt;div&gt;Enter Dates&lt;/div&gt;
          &lt;form action=&quot;&quot;&gt;
              &lt;label for=&quot;sdate&quot;&gt;Start date:&lt;/label&gt;
              &lt;input type=&quot;date&quot; name=&quot;sdate&quot; id=&quot;sdate&quot;&gt;
              
              &lt;label for=&quot;edate&quot;&gt;End date:&lt;/label&gt;
              &lt;input type=&quot;date&quot; name=&quot;edate&quot; id=&quot;edate&quot;&gt;
              &lt;button id=&quot;confirm&quot;&gt;Confirm&lt;/button&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Code of my back end side index.js file is as under:</p>
  <pre><code>const path = require('path');
  const express = require('express');
  const app = express();
  const port = process.env.PORT || 5000;
  
  // data received from database 
  const data = [
      { date : new Date('2021-04-01'), id : 1, amount: 100, remark : 'test1' },
      { date : new Date('2021-04-05'), id : 2, amount: 100, remark : 'test2' },
      { date : new Date('2021-04-07'), id : 3, amount: 100, remark : 'test3' },
      { date : new Date('2021-04-09'), id : 4, amount: 100, remark : 'test4' },
      { date : new Date('2021-04-10'), id : 5, amount: 100, remark : 'test5' },
      { date : new Date('2021-04-14'), id : 6, amount: 100, remark : 'test6' },
      { date : new Date('2021-04-15'), id : 7, amount: 100, remark : 'test7' },
      { date : new Date('2021-04-18'), id : 8, amount: 100, remark : 'test8' },
      { date : new Date('2021-04-19'), id : 9, amount: 100, remark : 'test9' },
      { date : new Date('2021-04-20'), id : 10, amount: 100, remark : 'test10' }
  ]
  
  
  app.use(express.static(__dirname));
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'pug');
  
  app.get('/', (req, res)=&gt;{
      res.sendFile(__dirname + '/getDates.html')
  })
  
  
  app.get('/:p1/:p2', (req, res)=&gt;{
  
      // filter data datewise 
      const filtered = data.filter( element =&gt;{
          return element.date &gt;= new Date( `${req.params.p1}` ) &amp;&amp; element.date &lt;= new Date( `${req.params.p2}` )
      } )
      
  
      // prepare data for use with pug template 
      let fData =[]
      fData.push( Object.keys( filtered[0] ).map(x =&gt; x.toUpperCase() ) ) 
  
      for (let line of filtered){
          fData.push( Object.values( line ) )   
      }
  
      // console.log( fData )  // check data on console --&gt;&gt; upto here it works fine 
      res.render('report', { title: 'Sale data', rows: fData })  // this is not rendered if fetch request is sent 
  
  })
  
  app.listen(port, ()=&gt;  console.log(`Server running on port no: ${port} ...`))
  
      
  </code></pre>
  <p>Code of my pug file is as under:</p>
  <pre><code>doctype html
  html(lang=&quot;en&quot;)
      head
          meta(charset=&quot;UTF-8&quot;)
          meta(http-equiv=&quot;X-UA-Compatible&quot;, content=&quot;IE=edge&quot;)
          meta(name=&quot;viewport&quot;, content=&quot;width=device-width, initial-scale=1.0&quot;)
          title Report
          link(rel=&quot;stylesheet&quot; href=&quot;../styles.css&quot;)
      body 
          .tableDiv 
              div #{title}
              table 
                  each row in rows 
                      tr 
                          each col in row 
                              td #{col}        
  </code></pre>
  <p>Code of my CSS file style.css is as under:</p>
  <pre><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  
      font: bold 12px arial;  /* short-cut -&gt;&gt; weight style size family */
  }
  
  .wrapper {
      margin: 5px;
      background-color: aliceblue;
      padding: 10px 30px;
      display: inline-block;
      border: 1px solid black;
      border-radius: 5px;
  }
  
  .wrapper div {
      border-bottom: 1px solid black;
      display: inline-block;
      margin-bottom: 5px;
  }
  
  .wrapper form label {
      margin-top: 10px;
  }
  
  .wrapper form label, .wrapper form input {
      display:block;
  }
  
  .wrapper form button {
      margin-top: 10px;
      padding: 5px 15px;
  }
  
  .tableDiv {
      margin: 10px;
      padding: 10px;
      display: inline-block;
  }
  
  .tableDiv div {
      padding: 5px;
      text-align: center;
      background-color: beige;
      border: 1px solid gray;
  }
  
  .tableDiv table, .tableDiv td {
      border: 1px solid gray;
      border-collapse: collapse;
  }
  
  .tableDiv table td {
      padding: 5px 10px;
  }
  </code></pre>
  <p>From the above code it is evident that:</p>
  <ol>
  <li>There is index.js file which serves css formatted getDates.html file into the browser to get required information.</li>
  <li>When user inputs start date, end date and press confirm button, the fetch get request is sent to the server.</li>
  <li>There is no error in browser console when confirm button is pressed.</li>
  <li>Server receives request and prepares data for use in pug template file, which when console logged, is displayed in console.
  <em><strong>This means that application is behaving correctly till this line - 'console.log( fData )' in index.js and here lies the problem.</strong></em></li>
  <li>The pug file report.pug is not rendered to the browser.</li>
  <li>Interesting part is that when  'http://localhost:5000/2021-04-01/2021-04-10' is directly typed in address bar and pressed
  enter, the pug template is rendered !!!!!!</li>
  </ol>
  <p>I can not figure out as to what is happening.  My questions are:</p>
  <ol>
  <li>Is the fetch request correctly sent to get datewise dynamic result?</li>
  <li>Is there error on server side which prevents template to render?</li>
  </ol>
  <p>I shall be grateful for guidance.</p>