Save JSON data to text file and read it

Question

Is there possible to save JSON data into local text file? So later i can use it again using by load that file and get the stored JSON data back. Actually want i really want to do is to export JSON data in text file so i can use later as import.Any suggestion or solution here?

This is some example that i want to use to export to text.

http://jsfiddle.net/k56eezxp/

var data = new Blob([text], {type: 'text/plain'});

nothing "automagic" ... you'll need to use some technique to offer a file to save, and another technique to ask for a file to read - ... or learn about [localstorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) — Jaromanda X, May 18 '17 at 03:42
Why would you *not* store the file on the server, so that the user can access their data from other devices? — nnnnnn, May 18 '17 at 03:46
If you are looking to save JSON you should look into localStorage — Beamer180, May 18 '17 at 03:53
If you are trying to create a `.json` file why do you create a `.txt` file? — guest271314, May 18 '17 at 04:00

score 2 · Accepted Answer · answered May 18 '17 at 05:06

Is there possible to save JSON data into local text file?

Yes. Currently JavaScript at linked jsfiddle creates a .txt file, not a valid JSON file.

You can use try..catch..finally and JSON.parse() to check if input at <textarea> element is valid JSON. If .value of <textarea> is valid JSON create Blob URL using Blob or File constructor with MIME type property set to "application/json". and URL.createObjectURL(), else notify user that input is invalid JSON.

(function () {

 let file, url, reader = new FileReader;
 
 function createJSONFile(json) {
    let e = void 0;
    try {
      JSON.parse(json)
    } catch (err) {
      e = err;
      code.textContent = e;
    }
    finally {
      if (e) {
        code.classList.add("invalid");
        return "Invalid JSON";
      }
      else {
        code.classList.remove("invalid");
        file = new File([json], "info.json", {type:"application/json"});
        url = URL.createObjectURL(file);
        return url;
      }
    }
  };
  
  function revokeBlobURL() {
    window.removeEventListener("focus", revokeBlobURL);
    URL.revokeObjectURL(url);
    if (file.close) {
      file.close();
    }    
  }
  
  function readJSON(e) {
    reader.readAsText(input.files[0]);
  }
 
  let create = document.getElementById("create"),
    textbox = document.getElementById("textbox"),
    code = document.querySelector("code"),
    input = document.querySelector("input[type=file]"),
    pre = document.querySelector("pre");

  create.addEventListener("click", function () {
    var link = document.createElement("a");
    link.setAttribute("download", "info.json");
    var json = createJSONFile(textbox.value);
    if (json !== "Invalid JSON") {
      link.href = json;
      document.body.appendChild(link);
      code.textContent = "Valid JSON";
      link.click();
      window.addEventListener("focus", revokeBlobURL);
    } else {
      code.textContext = json;
    }
  }, false);
  
  reader.addEventListener("load", function() {
    pre.textContent = JSON.stringify(reader.result, null, 2);
  });
  
  input.addEventListener("change", readJSON);
})();

code {
  display:block;
  width: 350px;
  height: 28px;
  border: 1px dotted green;
  padding: 4px;
  margin: 4px;
  color: green;
}

.invalid {
  border: 1px dotted red;
  color: red;
}

pre {
  background: #eee;
  width: 350px;
  height: 350px;
  border: 1px solid darkorange;
}

<textarea id="textbox" placeholder="Input valid JSON"></textarea><br>
<button id="create">Create file</button> 
<br>
<code></code>
<input type="file" accept=".json" />
<pre></pre>

score 1 · Answer 2 · edited May 23 '17 at 12:03

You are asking if it is possible, you example clearly shows that it is. I think you want to know how to read the text file after you have created it. In that case, you can follow the answer in this question: Read a local text file using Javascript

JSON is simply a formatted string that allows JavaScript to reconstruct objects, that means you simply store a string to the text file, then read it again, and convert it to object by using JSON.parse().

Here's a working example:

(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    return textFile;
  };


  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.createElement('a');
    link.setAttribute('download', 'info.txt');
    link.href = makeTextFile(textbox.value);
    document.body.appendChild(link);

    // wait for the link to be added to the document
    window.requestAnimationFrame(function () {
      var event = new MouseEvent('click');
      link.dispatchEvent(event);
      document.body.removeChild(link);
  });
    
  }, false);
})();

  var fileInput = document.getElementById('files');
  var fileDisplayArea = document.getElementById('test');

  fileInput.addEventListener('change', function(e) {
   var file = fileInput.files[0];
   var textType = /text.*/;

   if (file.type.match(textType)) {
    var reader = new FileReader();

    reader.onload = function(e) {
     fileDisplayArea.innerText = reader.result;
    }

    reader.readAsText(file); 
   } else {
    fileDisplayArea.innerText = "File not supported!"
   }
  });

<textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> 

<input type="file" id="files" name="files" multiple />
<output id="list"></output>
<div id = "test">

</div>

Save your json string to text file, then read it. This is just a guide.

Save JSON data to text file and read it

2 Answers2

Linked

Related