- How do you read from a JSON file? How do you write to a JSON file?
If you are not sure look up the entries for fs.readFile and
fs.WriteFile in W3Schools.
Answer: Here are main.js methods that read from and write to a file. Appending to
a file is the exam as writing, except that the data is appended to the end of the
existing contents of the file.
// Test the fs.readFile method.
const express = require("express");
const app = express( );
const fs = require("fs");
var fileData;
fs.readFile("input.txt", (err, data) => {
if (!err) {
fileData = data;
}
else {
fileData = "Error reading file.");
}
});
app.get("/show_file_data", (req, res) => {
res.send(`<p>${fileData}</p>`);
});
// Test the fs.writeFile method.
fs.writeLine("output.txt", "This is a test.", (err) => {
if (err) {
console.log("Error writing to output.txt.");
}
else {
console.log("Success writing to output.txt.");
}
});
- Add save capability to the Elements Example: when the route
localhost:3000/elements/save
is entered, the elements array is converted to JSON and written to the file
data/elements.json, replacing its original contents.
Answer: Will be published later today, Monday, Mar 18.
- Look at the TestEjs5 Example. Modify it so that the form
uses method="post". Here is are the modified source code files. Test them.
Here are the source code files:
-------------------------------------------------
// Display a name obtained from an input form with
// method=GET
// Source code file: main.js
const express = require("express");
const app = express( );
app.use(express.urlencoded({extended: false}));
app.set("view engine", "ejs");
app.get("/contact_info", (q, r) => {
r.render("contact-info");
});
app.post("/contact_receipt", (q, r) => {
console.log(q.body);
r.render("contact-receipt", q.body);
});
app.listen(3000, ( ) => {
console.log("Listening on port 3000.");
});
-------------------------------------------------
// Source code file:
<!DOCTYPE html>
<!-- Source code file: contact-info.ejs -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestEjs2 Example</title>
</head>
<body>
<h2>TestEjs5 Example</h2>
<form name="form1"
action="/contact_receipt"
method="post">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<label for="phone">Phone:</label><br>
<input type="text" id="phone" name="phone"><br><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br><br>
<input type="submit" value="Submit Contact Info">
</form>
</body>
</html>
-------------------------------------------------
// Source code file:
<!DOCTYPE html>
<!-- Source code file: contact-receipt.ejs -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestEjs5 Example</title>
</head>
<body>
<h1>TestEjs5 Example</h1>
<p>Your contact information has been received<br>
Thank you for your information.</p>
<table>
<tr>
<th>First Name</th> <th>Last Name</th>
<th>Phone</th> <th>Email</th>
</tr>
<tr>
<td><%= fname %></td> <td><%= lname %></td>
<td><%= phone %></td> <td><%= email %></td>
</tr>
</table>
</body>
</html>
------------------------------------------------