title: Unable to fetch data from MySQL database with Fetch API
body: <p>I'm able to post successfully to MySQL database with Fetch API. The problem I'm having is trying to retrieve data from my database.</p>
  <p>client.js:</p>
  <pre><code>
  const output = document.getElementById('output');
  const username = document.querySelector('#username');
  const date = document.querySelector('#date');
  const submitbtn = document.querySelector('#submitbtn');
  const commentOutput = document.querySelector('#message');
  const form = document.querySelector('#form');
  const comments = document.getElementById('message')
  
  
  form.addEventListener('submit', function(e) {
      e.preventDefault(e);
      sendMessage();
  
      let formMessage = new FormData(form);
  
      formMessage.append('api-key', 'myApiKey');
  
  
      fetch('http://localhost:5502/superhero', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
          },
          body: JSON.stringify({ comments: comments.value })
  
      }).then(function(response) {
          console.log(response)
          console.log(JSON.stringify({ comments: comments.value }))
          return response.json()
      }).then(function(data) {
          console.log(data);
      }).catch(function(error) {
          console.log(error);
      });
  })
  
  
  
  submitbtn.addEventListener('click', function() {
      fetch('http://localhost:5502')
          .then(response =&gt; {
              if (response.ok) {
                  console.log('success')
              } else {
                  console.log('failure')
              }
              return response.json();
          })
          .then(data =&gt;
              console.log(data))
          .catch(error =&gt; console.log('Error'))
  
  
      var newUser = document.createElement(&quot;div&quot;);
      var newName = document.createElement(&quot;h5&quot;);
      var newDate = document.createElement(&quot;h5&quot;);
      var newMessage = document.createElement(&quot;h6&quot;);
  
      newName.textContent = comments.value;
      newDate.textContent = message.value;
      newMessage.textContent = message.value;
  
      output.appendChild(newName);
      output.appendChild(newDate);
      output.appendChild(newMessage);
  
      output.appendChild(newUser);
  })
  </code></pre>
  <p>The problem here is the fetch method under the submitbtn:
  Output:
  <a href="https://i.stack.imgur.com/vKdv2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vKdv2.png" alt="enter image description here" /></a></p>
  <p>index.js:</p>
  <pre><code>router.post(&quot;/superhero&quot;, function(req, res) {
  
      const user = req.user;
      const comments = req.body.comments;
  
      sqlDatabase.query(&quot;INSERT INTO comments (user_id, comments) VALUES (?, ?)&quot;, [user, comments],
          function(error, results, fields) {
              console.log(results);
              console.log(comments);
              console.log('This is: ', comments)
              console.log(error)
              if (error) throw error;
  
          });
  })
  
  
  router.get(&quot;/superhero&quot;, authenticationMiddleware(), function(req, res, err) {
  
      sqlDatabase.query(&quot;SELECT users.username, comments.comments, comments.date FROM users INNER JOIN comments ON users.user_id=comments.user_id&quot;,
          function(error, results, fields) {
              if (error) throw error;
              console.log(results);
              console.log(error);
              res.render('superhero');
  
          })
  })
  </code></pre>
  <p>I want to retrieve that data under router.get</p>
  <p>Hope this is enough details. Thanks in advance. Noob by the way.</p>