Access file from project directory and modify it using Javascript

Question

I have a .json file in the same directory as my html file. I want to access this file and modify it. This modified file data will be used to load the contents of the same html file. How can I access the file and modify it in Javascript? Being a newbie in Javascript, any help is appreciated. Thanks.

Answer 1

HTML5 added a file api for interacting with files on your computer.

This HTML5Rocks article explains how to use it.

this MDN page also explains it

html

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

js

var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  var fileList = this.files; /* now you can work with the file list */
}

api link:

FileReader.readAsText()

Answer 2

You cannot do this solely with HTML and javascript. What you want to do requires reading the file on the web server, not from the user's hard drive. Therefore, you must use a back-end language, like PHP. It's actually pretty easy.

If you haven't used PHP before, you can test that you have access to it (almost everyone does except those on Microsoft OS web servers). Just create a new file called test.php and make it look like this:

<?php
    echo 'Hello there';

Then, navigate to http://whatever_your_domain_is/test.php

---

To access your JSON document, you can either do it as the page is loading, as follows:

(1) Rename the page from .html to .php -- all this does is allow PHP to be processed on the page. Otherwise, it is exactly the same as an HTML page.

(2) Add a section like this at the top:

<?php
    $filePath = "json_file_name.txt";
    $handle = fopen($filePath, "r");
    $json = fread($handle, filesize($filePath));
?>

(3) Later, in your javascript code, plop that into a variable, like this:

$(function(){

    var imported = "<?php echo $json; ?>";
    var json = $.parseJSON(imported);  //or, JSON.parse(imported);

}); //END document.ready

---

Or, you can use AJAX to do it on demand (i.e., triggered by a user event, such as a button click).

Here are some examples that demonstrate how easy AJAX is.

Note that using AJAX will not allow you to avoid the back-end server language (PHP). AJAX code communicates with a back-end (PHP) file, which does the same work as that described in the above section, and sends the result back to the AJAX success function in the javascript. The advantage of AJAX is being able to do it on demand, instead of just when the page is initially rendered.

---

Other refs:

how to parse json data with jquery / javascript?