Convert ajax to fetch prevent form submission

1

guys I have the following code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Client Data</title>
</head>
<body>
    <h1>Please fill data in the form below:</h1>
    <form id="form" method="POST" action="">
        <label>Name:<input type="text" name="client-name" required></label>
        <br>
        <label>Email:<input type="text" name="client-email" required></label>
        <br>
        <label>Comment:<br><textarea name="comment"></textarea></label>
        <br>
        <input type="submit" value="Submit">
    </form>
    <a href="/view-feedbacks">View feedbacks</a>
    <ul id=comments></ul>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
//       $.ajax({
//         url: '/view-feedbacks',
//         type: 'GET'
//       })
//       .done(function(feedbacks) {
//         console.log(feedbacks)
//         for(let i=0; i<feedbacks.comments.length; i++){
//             $('#comments').append(feedbacks.comments[i].email)
//             console.log(feedbacks.comments[i].email);
//         }
//         console.log(feedbacks.comments.length)

// })
      
//       .fail(function(e) {
//         console.log(e);
//       });

document.getElementById("form").addEventListener('submit', function(e) {
  e.preventDefault();
  fetch('/')
.then((response => {
         status = response.status;
         return response.json()
     }))
    .then(response => {
       console.log({
            response: response,
            status: status
        }) 
        console.log(response.comments)
        for (x in response.comments) {
        document.getElementById("comments").innerHTML += response.comments[x].email+'<br>'+response.comments[x].comment+'<br>';
}
    }).catch(err => console.log('fetch didn\'t succeed'+err));

})

    </script>

</body>
</html>

if you want to see the app.js file i will include it below but i dont think its relevant to this error that I am receiving

fetch didn't succeed SyntaxError: Unexpected token < in JSON at position 0

and below is the app.js file

function log(x){
    console.log(x)
}
var express = require('express');
const fetch = require("node-fetch");

var path = require('path');
var bodyParser = require('body-parser');
var mongoose= require('mongoose');
mongoose.connect('mongodb://localhost:27017/feedbacks',{useNewUrlParser: true});
//var mongodb = require('mongodb');
log('connected');
// var dbConn = mongodb.MongoClient.connect('mongodb://localhost:27017',{ useNewUrlParser: true } );
var app = express();

var Schema = mongoose.Schema;
var feedbackSchema= new Schema({
    name:  {
      type: String,
      required: 'enter a name'      
    },
    email: {
      type: String,
      required: 'enter an email'   
    },
    comment: {
      type: String 
    }  
  });
var feedbacks = mongoose.model('feedbacks', feedbackSchema);

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.resolve(__dirname, 'public')));

app.post('/post-feedback', function (req, res) {
    var f= new feedbacks;
    f.name = req.body['client-name'];
    f.email = req.body['client-email'];
    f.comment = req.body.comment;
    log('I am in post feedback')
    f.save(function(err, data){ 
        if (err){
         //return log(err);
         res.send({
            status:'failure',
            error: err
         })
        }
        log('we succeeded ')
      });

    res.send('Data received:\n' + JSON.stringify({
        data: req.body,
        status: 'success'
    }));
});


// app.get('/view-feedbacks',  function(req, res) {
//     dbConn.then(function(db) {
//         db.collection('feedbacks').find({}).toArray().then(function(feedbacks) {
//             res.status(200).json(feedbacks);
//         });
		
//     }).catch(function(error) {
//         res.json({"message": "Hello json"})
//        });
// });


app.get('/view-feedbacks',  function(req, res) {
    
    feedbacks.find({}, function(error, comments) {
        // console.log(comments); 
        res.json({comments})
    });
});







app.listen(process.env.PORT || 3000, process.env.IP || '0.0.0.0' );

I am leaving the action as empty string on assumtion that this will send it back to the same page

2

Just looking at it, I don’t understand why fetch('/') and then in app app.post('/post-feedback', function (req, res) {

What route is the fetch using?