Writing form data to a json file - javascript

Question

I've been scratching my head over this for awhile. I have plans for a desktop application using Electron. Thus, I am developing an application using Node.js and Express.js . I have a simple app.js file that launches my site code:

var express = require("express");
var app = express();

app.use(express.static(__dirname + '/public'));

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
});

Then I have a form on my page:

<form>
    <input type="text" name="name">
    <input type="text" name="url">
    <button type="submit">Submit</button>
</form>

There is a jQuery event handler set on the submit button from a script.js file:

$(document).ready(function(){
    var text;
    $('form').submit(function( event ) {
        text = $( this ).serializeArray();
        console.log( text );
        event.preventDefault();
    });
});

How do I take the text I get from the form and write to a JSON file (that can be read again when the application is closed and reopened).

There is this question and answer: Writing files in Node.js

And I understand that, but how do I execute that code from my submit button?

My file structure is quite simple:

|- app.js
|- package.json
|- node_modules
|- public_
   |- data.json
   |- index.html
   |- jquery.js
   |- script.js
   |- style.css
   |- bootstrap.min.css
   |- bootstrap.min.js

XCS · Accepted Answer · 2016-04-15T18:56:57.603

1

On client:

$(document).ready(function(){
    var text;
    $('form').submit(function( event ) {
        text = $( this ).serializeArray();
        // Send data to server
        $.post('/saveFile', {data: text});
        event.preventDefault();
    });
});

So, you can send the data using an AJAX request. See more about jQuery.post()

On server:

app.post('saveFile', function(req, res) {
    // Write to file, I think received data is in req.body.data 
});

Here we create a route called saveFile that receives and response to POST requests. You can here write the received data to your file.

So, you would have something like this:

app.post('saveFile', function(req, res) {
    fs.writeFile("save.txt", req.body.data, function(err) {
        if(err) {
            return console.log(err);
        }

        console.log("The file was saved!");
        res.end("This message will be sent back to the client!");
    }); 
});

edited Apr 15 '16 at 18:56

answered Apr 15 '16 at 18:35

XCS

23,776
24
82
135

One small thing. Express currently is not parsing body. You need to add body-parser. [Express req.body](http://expressjs.com/en/api.html#req.body). Or proper question in Stackoverflow [How to retrieve POST query parameters in Express](http://stackoverflow.com/questions/5710358/how-to-retrieve-post-query-parameters-in-express/12008719#12008719) – Bonanza Apr 15 '16 at 18:43
This all compiles fine and produces no errors, but I need help with writing to the file from within the app.post function. – E.Arrowood Apr 15 '16 at 18:54
Yeah, there are many things to take in account, he might also want to do something on the client after the request was completed. I decided just to answer his question on how to execute something on the server on form submit. – XCS Apr 15 '16 at 18:55
As you said, simply use this function: http://stackoverflow.com/questions/2496710/writing-files-in-node-js?lq=1 – XCS Apr 15 '16 at 18:55
I am getting a 500 (Internal Server Error) on my browser and a TypeError: Cannot read property 'data' of undefined – E.Arrowood Apr 15 '16 at 19:11
On the client or server side? If you are on the server you might want to include body-parser as explained in a comment above. – XCS Apr 15 '16 at 19:22
Yay everything works, but sadly its writing to the file like so: [object Object], [object Object], [object Object] – E.Arrowood Apr 16 '16 at 01:56
@E.Arrowood `JSON.stringify` it. – XCS Apr 16 '16 at 07:17
@Cristy Is there a way to append to the file instead of delete and write over what is already there? – E.Arrowood Apr 24 '16 at 18:12

Writing form data to a json file - javascript

1 Answers1