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