I am making this website project where people can leave comments and the webpage will dynamically display the comments without reloading the page. My comments are stored in an array in my server in the format Allcomments=[ { username: 'username', info: 'title', commentinfo: 'commentinfo ' }]
. I am currently receiving this error when I try and run my code Uncaught (in promise) ReferenceError: res is not defined at main.js:53 at async loadComments (main.js:50)
and the comments are not displaying as a result. I am also confused on how to implement the function so that it updates with new comments without needing a page reload.
Any help or tips would be greatly appreciated! This is my code:
index.html
<html>
<body>
<main>
<div class="container">
<hr>
<h1>comments !</h1>
<hr>
<div class="row" id='commentsSection'></div>
</div>
</div>
</main>
<script src='client.js'></script>
</body>
</html>
client.js
async function GetComments () {
let info = {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
};
await fetch('http://127.0.0.1:8090/comments', info)
.then((res) => { return res.json(); })
.then(data => {
document.getElementById('commentsSection').innerHTML;
}).then(() => {
const comments = JSON.stringify(res);
for (let comment of comments) {
const y = `
<div class="col-4">
<div class="card-body">
<h5 class= "card-title">${comment.name}</h5>
<h6 class="card-subtitle mb-2 text-muted">${comment.info}</h6>
<div>comment: ${comment.comment}</div>
<hr>
</div>
</div>
`;
document.getElementById('commentsSection').innerHTML =
document.getElementById('commentsSection').innerHTML + y;
}
});
}
GetComments();
server.js
const app = express();
const port = 8090;
const express = require('express')
const bodyParser = require('body-parser');
const cors = require('cors');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
let Allcomments=[];
app.get('/comments', (req, res) => {
res.json(Allcomments);
});
You are using res in a .then
block, but you didn't pass it in from the earlier then
block:
.then((res) => { return res.json(); }) // res is defined within this block only
.then(data => {
document.getElementById('commentsSection').innerHTML;
.then(() => {
const comments = JSON.stringify(res); // <- ReferenceError: res is not defined
This should fix it:
await fetch('http://127.0.0.1:8090/comment', info)
// extract data from response body:
.then((response) => { return response.json(); })
// response body is comments array
.then(comments => {
for (let comment of comments) {
const y = `
<div class="col-4">
<div class="card">
<div class="card-body">
<h5 class= "card-title">${comment.name}</h5>
<h6 class="card-subtitle mb-2 text-muted">${comment.title}</h6>
<div>comment: ${comment.usercomment}</div>
<hr>
</div>
</div>
</div>
`;
document.getElementById('commentsSection').innerHTML += y;
}
})
// also add a catch block
.catch(err => {
console.error('error:', err)
});
why would i need to pass res in to commentsSection in my HTML ? that is just the area where I want the dynamic code to be placed at
@userj You need to pass in
comments
to the comments block, andcomments
is simply the response body. See the code above, which I just now simplified. (Your code was referencingres
in the comments block, where it was not defined, which was causing the error you mentioned)