Search code examples
javascriptjsonwebfetchno-database

How to save data into JSON file


I have simple app for recording of performed services, but I don't want to use database.
I've got data.JSON which I fetching in pure JS ->

fetch('./data/data.json')
.then(res => res.json())
.then(data => {/*fetched data appended into html*/}) 

So when I want add new record I don't know how to save new object into json. I looked for some tutorial but everything was for Node.js, php,...

<form id ="newRow">
 // ...
</form>


<script>
document.getElementById('newRow').addEventListener('submit', addPost);

function addPost(e) {
    e.preventDefault();

    let name = document.getElementById('fname').value;
    let date = document.getElementById('fdate').value;
    let service = document.getElementById('fservice').value;
    let price = document.getElementById('fmoney').value;
    let desc = document.getElementById('fdesc').value;

    const user = {
        id: Date.now(),
        name: name,
        date: date,
        service: service,
        price: price,
        desc: desc
    }
    document.forms[0].reset();
}
</script>

Solution

  • Client-side JS cannot write to files on the server.

    If it could, then anybody could write files to any server. The Google Homepage would be overwritten with a new piece of vandalism or phishing scam every five seconds.

    Client-side JS can make HTTP requests. You need server-side code to read the data from them and handle it (usually with a suitable level of authentication/authorisation first). This brings you back to Node.js / PHP / etc.

    NB: Use a real database from which you generate JSON with server-side code. Don't try to build your own DB out of JSON files and file writing code. That way lies race conditions.