George Zafiris George Zafiris - 1 year ago 47
Ajax Question

Modify and save data in JSON file using Ajax

First of all here's my .json file:

"ids": [1,2],
"names": ["John Richards", "Doe Williams"],
"skills": [ "Senior Software Engineer", "Junior Software Developer"]


And here's my ajax call to display each name from the object.

dataType: "json",
url: "entries.json",
success: function(data){
for (var i = 0; i < data.names.length; i++){

I have a form with 3 fields and a button which I'm using to submit new data. The problem is that I can't modify that json file and submit that data.

var url = "entries.json";

//Form input
var id = $("#empID").val();
var fullName = $("#empFullName").val();
var prof = $("#empProf").val();

var entry = { "ids":id,
Ajax call for modification of the json file?!?!

What I mean by modify is to basically insert the id, fullName and prof into the corresponding field of the json and save it with the new values appended. Any insight? I'm stuck. Pulling is fine. How do I push data to the .json file? If I missed to provide anything important please let me know. I'm relatively new working with ajax.

Thanks in advance!

P.S:I've already made the project using a database if anyone's wondering.

Answer Source

You cannot write to a JSON file using only JavaScript in the browser. But with JavaScript in the browser you can write Document.cookie and also write in the Window.localStorage.

Writing in the localStorage of the browser:

// Form input
var id = $("#empID").val();
var fullName = $("#empFullName").val();
var prof = $("#empProf").val();

var obj = {
    "ids": id,
    "names": fullName,
    "skills": prof
localStorage.setItem('myJavaScriptObject', JSON.stringify(obj));

And than to retrieve the object, from the localStorage, you can do:

var obj = JSON.parse(localStorage.getItem('myJavaScriptObject'))

Other thing you can do is to create a service in the backend (NodeJS, Ruby on Rails, PHP, JAVA, etc) to handling the writing data on the JSON file

  • From the browser making a POST request to the endpoint of your service the data will be saved into the JSON file.

Hope this can help.