Styjun

I'm fairly new to node.js! I'm trying to write a comment section that's rendered by node.js server. I have a json file, and I pass its value into an ejs file, so far it renders fine.
Now I added a comment section, with input field and submit button, so my question is:
is it possible to add the input in the comment section back to existing json file, to append new content, then rewrite the json file, then re-render all, after I click the submit button?

I've tried to add event listener to get value, then I try to use JSON.stringfy() to get the string...then I have no clue where to go from now on, because I don't know if the above question is even possible?

In case it's not possible, what should I do to keep my old data, while adding new one and have it render to screen? If database is not involved, then is localStorage my only choice?

now I more or less solve my problem!

Here are how I solved it. Here is my fans.json (sorry, not nice format after I tested it and have it rewritten many times)

"comments":[
"name":"Anna","message":"I love your show last summer in Stockholm! Best summer concert I've been to!",
"name":"Jason","message":"This is War is the best album I've ever bought, I can't get tired of listening to it all the time.",
"name":"Hansel","message":"When are you guys coming to Germany again?","name":"Ash","message":"My favorite song is Up in the Air. It always makes me happy and wanna dance!"]

First I created the template in fans.ejs

<section class="content-section container">
 <h2>Dear fans, we'd love to hear from you!</h2>
 <% fans.comments.forEach((comment) => %>
 <p class="name"><%= comment.name%></p>
 <p class="message"><%= comment.message%></p>
 <% ) %>

 <div id="commentDom">
 </div>
 </section>

 <div class="comment">
 <label for="full-name">Name</label>
 <input id="full-name" name="full-name" type="text"/>
 <label for="message">Comment</label>
 <textarea id="message" name="message"></textarea>
 <button class="btn btn-primary" value="submit">Submit</button>
 </div>

then I wrote this part in this fans.js (there are more to it but I just want to emphasize the part that interacts with server.js

document.querySelector('button').addEventListener('click', (e)=> 
 if (name.trim() === '' )

Then I wrote those in the server.js, so the new information gets to be pushed to the my existing fans.json file, then it gets rewritten.

app.post('/fans', (req, res) => 
 fs.readFile('fans.json', (error, data)=>
 if (error) 
 res.status(500).end()
 else
 const fansObj = JSON.parse(data)
 fansObj.comments.push(req.body)
 fs.writeFile('fans.json', JSON.stringify(fansObj), (error) =>
 if (error)
 console.log(error)
 else
 console.log('write successfully!')
 
 )
 
 )
)

After that I found that I have to refresh my page manually to get updated when I clicked the button. I googled around and it seems I have to use websockets or socket.io to solve this problem, which is out of my knowledge scope so far. So I decided to use the simple way by creating two functions, one is to generatedom in my ejs file, which goes in the "commentDom" section, after the original comment section. Another is to remove the input msg in the input area, I remove the msg in the fans.js as well as the ones in the fans.ejs(let them = ''), after the button is clicked, thus we can create a nice immediate feedback to the user. Of course if they refresh the browser, they will be able to see the "real" rendering from the server side.

Of course I know in the real world more things will be involved, such as database etc. I look forward to learning more on that later. :D