I am currently attempting to convert incoming input data from a form to data that can be stored within a JSON file, I am basically trying my hand at having a form without a back-end to store data.
I am using Node.JS module "fs" || "file-system"
I am also using Browserify for bundling as I am aware in order to use "require('fs')" it would need to be in a node environment and need to use a bundler to make it work in browser which is what I need.
I have built a test environment to prior to testing with the actual form by creating a button, once clicked pushes data from an object within my main.js file to my test.JSON file using node.js file-system but I am running into a current error of:
bundle.js:16 Uncaught TypeError: fs.writeFile is not a function
at HTMLButtonElement.submit (bundle.js:16)
Also I am not seeing any source code being bundled into my bundle.js file after calling
browserify main.js -o bundle.js
I tested this with a simple ramda function to see how browserify should embed code and I do not get the same result when using file-system.
index.html
<!-- index.html -->
<!doctype html>
<html>
<head>
<style>
body {
background-color: #636363;
}
section {
height: 80vh;
width: 100%;
display: grid;
justify-content: center;
}
div {
text-align: center;
margin: auto;
}
button {
padding: 40px;
font-size: 2rem;
width: 150px;
}
</style>
</head>
<body>
<section>
<div>
<button>Add to JSON</button>
</div>
</section>
<script src="main.js"></script>
<script src="bundle.js"></script>
</body>
</html>
main.js
const button = document.querySelector("button");
let fs = require('fs');
function submit() {
let obj = {
table: []
};
fs.writeFile('test.json', 'utf8');
fs.readFile('test.json', 'utf8', function readFileCallback(err, data){
if (err){
console.log(err);
} else {
obj = JSON.parse(data);
obj.table.push({id: 2, square:3});
json = JSON.stringify(obj);
fs.writeFile('test.json', 'utf8');
}
button.addEventListener("click", submit);
bundle.js
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
},{}],2:[function(require,module,exports){
const button = document.querySelector("button");
let fs = require('fs');
function submit() {
let obj = {
table: []
};
fs.writeFile('test.json', 'utf8');
fs.readFile('test.json', 'utf8', function readFileCallback(err, data){
if (err){
console.log(err);
} else {
obj = JSON.parse(data);
obj.table.push({id: 2, square:3});
json = JSON.stringify(obj);
fs.writeFile('test.json', 'utf8');
}});
}
button.addEventListener("click", submit);
},{"fs":1}]},{},[2]);
