title: Render Node API data in HTML
body: <p>I have been following this tutorial: <a href="https://howtocreateapps.com/fetch-and-display-json-html-javascript/" rel="nofollow noreferrer">https://howtocreateapps.com/fetch-and-display-json-html-javascript/</a></p>
  
  <p>And I have this script in my HTML page:</p>
  
  <pre><code>...
  &lt;script&gt;
      fetch('http://ec2-22-222-22-22.compute-1.amazonaws.com:8080/fish')
          .then(function (response) {
              return response.json();
          })
          .then(function (data) {
              appendData(data);
          })
          .catch(function (err) {
              console.log('error: ' + err);
          });
  
      function appendData(data) {
          var mainContainer = document.getElementById("myData");
          for (var i = 0; i &lt; data.length; i++) {
              var div = document.createElement("div");
              div.textContent = '&gt;&gt; ' + data[i].timestamp + ' ' + data[i].date + ' ' + data[i].time + ' ' + data[i].airt_c + ' ' + data[i].rh + ' ' + data[i].dewp + ' ' + data[i].prec + ' ' + data[i].slrr + ' ' + data[i].parr + ' ' + data[i].netr + ' ' + data[i].bar + ' ' + data[i].wspd + ' ' + data[i].wdir + ' ' + data[i].gspd + ' ' + data[i].s10t;
              mainContainer.appendChild(div);
          }
      }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="bg"&gt;
    &lt;div id="myData"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The table it's trying to display is from this SQL table:</p>
  
  <pre><code>      timestamp      | date  | time  | airt_c | rh | dewp | prec | slrr | parr | netr | bar  | wspd | wdir | gspd | s10t 
  ---------------------+-------+-------+--------+----+------+------+------+------+------+------+------+------+------+------
   2020-03-14 12:03:49 | 03-14 | 11:00 | 6.4    | 47 | -4.1 | 0.0  | 765  | 1793 | 417  | 1022 | 3.8  | 272  | 10.0 | 4.0
  </code></pre>
  
  <p>My <code>index.js</code> file (running on an ec2 -- a different host than the HTML page), looks like this:</p>
  
  <pre><code>const express = require('express')
  const bodyParser = require('body-parser')
  const app = express()
  const port = 8080
  const db = require('./queries')
  
  
  app.use(bodyParser.json())
  app.use(
    bodyParser.urlencoded({
      extended: true,
    })
  )
  
  app.get('/', (request, response) =&gt; {
    response.json({ info: 'Node.js, Express, and Postgres API' })
  })
  
  app.listen(port, () =&gt; {
    console.log(`App running on port ${port}.`)
  })
  
  app.get('/fish', db.getFish)
  </code></pre>
  
  <p>My <code>queries.js</code> looks like this:</p>
  
  <pre><code>const Pool = require('pg').Pool
  const pool = new Pool({
    user: 'user',
    host: 'database-1.sdsad2233.rds.amazonaws.com',
    database: 'db',
    password: 'pass',
  })
  
  
  const getFish = (request, response) =&gt; {
    pool.query('SELECT * FROM table ORDER BY timestamp DESC LIMIT 10', (error, results) =&gt; {
      if (error) {
        throw error
      }
      response.status(200).json(results.rows)
    })
  }
  
  module.exports = {
    getFish,
  }
  </code></pre>
  
  <p>How can I display the result of that query inside of my HTML page?</p>
  
  <p>--</p>
  
  <p>EDIT</p>
  
  <p>Someone mentioned that the issue might be because the HTML page is on a different host and does not have HTTPS.</p>
  
  <p>I am trying to create the HTML in a separate .js file on the same ec2 server, but hitting an error.</p>
  
  <p>My code:</p>
  
  <pre><code>var http=require("http");
  var server = http.createServer(function(request, response) {});
  var server = http.createServer(function(request, response) {
      response.writeHead(200, {
          'Content-Type': 'text/plain'
      });
  });
  var server = http.createServer(function(request, response) {
      response.writeHead(200, {
          'Content-Type': 'text/plain'
      });
      response.write("This is Test Message.");
      response.end();
  });
  server.listen(8082);
  
  
  
  fetch('/fish')
          .then(function (response) {
              return response.json();
          })
          .then(function (data) {
              appendData(data);
          })
          .catch(function (err) {
              console.log('error: ' + err);
          });
  
      function appendData(data) {
          var mainContainer = document.getElementById("myData");
          for (var i = 0; i &lt; data.length; i++) {
              var div = document.createElement("div");
              div.textContent = '&gt;&gt; ' + data[i].timestamp + ' ' + data[i].date + ' ' + data[i].time + ' ' + data[i].airt_c + ' ' + data[i].rh + ' ' + data[i].dewp + ' ' + data[i].prec + ' ' + data[i].slrr + ' ' + data[i].parr + ' ' + data[i].netr + ' ' + data[i].bar + ' ' + data[i].wspd + ' ' + data[i].wdir + ' ' + data[i].gspd + ' ' + data[i].s10t;
              mainContainer.appendChild(div);
          }
      }
  </code></pre>
  
  <p>The error:</p>
  
  <pre><code>$ node reality.js 
  /home/ubuntu/riapi/webpage.js:19
  fetch('/fish')
  ^
  
  ReferenceError: fetch is not defined
      at Object.&lt;anonymous&gt; (/home/ubuntu/riapi/webpage.js:19:1)
      at Module._compile (module.js:652:30)
      at Object.Module._extensions..js (module.js:663:10)
      at Module.load (module.js:565:32)
      at tryModuleLoad (module.js:505:12)
      at Function.Module._load (module.js:497:3)
      at Function.Module.runMain (module.js:693:10)
      at startup (bootstrap_node.js:188:16)
      at bootstrap_node.js:609:3
  </code></pre>