How to write data to a JSON file using Javascript

Question

For example  I have a  JSON file that has the following      honda    accord    color    red     ford    focus    color    black      What would be the javascript code to push another object   nissan    sentra    color    green   into this  json array to make the  json file look like     honda    accord    color    red     ford    focus    color    black     nissan    sentra    color    green      The reason I m asking is I am finding a lot of information online on how to pull data from a  json file using AJAX but not writing new data to the  json file using AJAX to update the  json file with additional data   Any help would be appreciated

User · Accepted Answer

You have to be clear on what you mean by "JSON".

Some people use the term JSON incorrectly to refer to a plain old JavaScript object, such as [{a: 1}]. This one happens to be an array. If you want to add a new element to the array, just push it, as in

var arr = [{a: 1}];
arr.push({b: 2});

< [{a: 1}, {b: 2}]

The word JSON may also be used to refer to a string which is encoded in JSON format:

var json = '[{"a": 1}]';

Note the (single) quotation marks indicating that this is a string. If you have such a string that you obtained from somewhere, you need to first parse it into a JavaScript object, using JSON.parse:

var obj = JSON.parse(json);

Now you can manipulate the object any way you want, including push as shown above. If you then want to put it back into a JSON string, then you use JSON.stringify:

var new_json = JSON.stringify(obj.push({b: 2}));
'[{"a": 1}, {"b": 1}]'

JSON is also used as a common way to format data for transmission of data to and from a server, where it can be saved (persisted). This is where ajax comes in. Ajax is used both to obtain data, often in JSON format, from a server, and/or to send data in JSON format up to to the server. If you received a response from an ajax request which is JSON format, you may need to JSON.parse it as described above. Then you can manipulate the object, put it back into JSON format with JSON.stringify, and use another ajax call to send the data to the server for storage or other manipulation.

You use the term "JSON file". Normally, the word "file" is used to refer to a physical file on some device (not a string you are dealing with in your code, or a JavaScript object). The browser has no access to physical files on your machine. It cannot read or write them. Actually, the browser does not even really have the notion of a "file". Thus, you cannot just read or write some JSON file on your local machine. If you are sending JSON to and from a server, then of course, the server might be storing the JSON as a file, but more likely the server would be constructing the JSON based on some ajax request, based on data it retrieves from a database, or decoding the JSON in some ajax request, and then storing the relevant data back into its database.

Do you really have a "JSON file", and if so, where does it exist and where did you get it from? Do you have a JSON-format string, that you need to parse, mainpulate, and turn back into a new JSON-format string? Do you need to get JSON from the server, and modify it and then send it back to the server? Or is your "JSON file" actually just a JavaScript object, that you simply need to manipulate with normal JavaScript logic?

User · Answer

Unfortunatelly  today  September 2018  you can not find cross-browser solution for client side file writing      For example  in some browser like a Chrome we have today this possibility and we can write with FileSystemFileEntry createWriter   with client side call  but according to the docu       This feature is obsolete  Although it may still work in some browsers  its use is discouraged since it could be removed at any time  Try to avoid using it       For IE  but not MS Edge  we could use ActiveX too  but this is only for this client    If you want update your JSON file cross-browser you have to use server and client side together   The client side script  On client side you can make a request to the server and then you have to read the response from server  Or you could read a file with FileReader too  For the cross-browser writing to the file you have to have some server  see below on server part    var xhr   new XMLHttpRequest        jsonArr      method    GET       jsonRequestURL    SOME PATH jsonFile     xhr open method  jsonRequestURL  true   xhr onreadystatechange   function         if xhr readyState    4  amp  amp  xhr status    200                   we convert your JSON into JavaScript object         jsonArr   JSON parse xhr responseText               we add new value          jsonArr push   nissan    sentra    color    green                 we send with new request the updated JSON file to the server          xhr open  POST   jsonRequestURL  true           xhr setRequestHeader  Content-Type    application x-www-form-urlencoded               if you want to handle the POST response write  in this case you do not need it              xhr onreadystatechange   function       handle POST response               xhr send  jsonTxt   JSON stringify jsonArr               but on this place you have to have a server for write updated JSON to the file          xhr send null     Server side scripts  You can use a lot of different servers  but I would like to write about PHP and Node js servers   By using searching machine you could find  free PHP Web Hosting   or  free Node js Web Hosting   For PHP server I would recommend 000webhost com and for Node js I would recommend to see and to read this list   PHP server side script solution  The PHP script for reading and writing from JSON file    lt  php     This PHP script must be in  SOME PATH jsonFile index php    file    jsonFile txt    if   SERVER  REQUEST METHOD        POST      or if  empty   POST         file put contents  file    POST  jsonTxt           may be some error handeling if you want   else if   SERVER  REQUEST METHOD        GET      or else if  empty   GET         echo file get contents  file         may be some error handeling if you want     gt      Node js server side script solution  I think that Node js is a little bit complex for beginner  This is not normal JavaScript like in browser  Before you start with Node js I would recommend to read one from two books    Learning Node  Moving to the Server-Side Node js Web Development  Server-side development    The Node js script for reading and writing from JSON file   var http   require  http        fs   require  fs        port   8080      pathToJSONFile     SOME PATH jsonFile txt    http createServer function request  response        if request method     GET                 response writeHead 200    Content-Type    application json             response write fs readFile pathToJSONFile   utf8             response end              else if request method     POST                 var body                request on  data   function chunk                        body push chunk                        request on  end   function                         body   Buffer concat body  toString                var myJSONdata   body split      1               fs writeFileSync pathToJSONFile  myJSONdata     default   utf8                       listen port     Related links for Node js    How to Develop Web Application using pure Node js  HTTP GET and POST  HTTP Server   detailed video tutorial  Anatomy of an HTTP Transaction How to handle POST request in Node js How do you extract POST data in Node js

User · Answer

JSON can be written into local storage using the JSON stringify to serialize a JS object  You cannot write to a JSON file using only JS  Only cookies or local storage      var obj     nissan    sentra    color    green     localStorage setItem  myStorage   JSON stringify obj      And to retrieve the object later  var obj   JSON parse localStorage getItem  myStorage

[javascript] How to write data to a JSON file using Javascript

Examples related to javascript

Examples related to json

Examples related to ajax

Examples related to object