any workaround to overwrite/download json file by searching values in it?

Question

I learned how to read csv file as json object in javascript. However, I want to update json file with new inserted records. Basically, I am going to use form value as a query, and loaded json file as a target, to find a match and updated json file accordingly. To do so, here is the structure of my script:

<!DOCTYPE html>
<html>
  <body>
    <form id = "manualForm">
            UIN:<br>
            <input type="text" id="uinInput" value="" required minLength="9" maxLength="9" >
            <br>
            <button id="checkinBtn"  type="button" onclick="checkId()">Manual Checkin</button>
    </form> 
    <p>Select local CSV File:</p>
    <input id="csv" type="file">
    <output id="out"> input file content</output>
   <a id="myButton" href="#">Download Json</button>

<script>
      var convertToJson(inputCsv);
    </script>
  </body>>
</html>

then here is my tentative function to check record in converted json file (the output of convertToJson). basically, whenever I click manualcheck button, the form value should be checked in converted json file, and update json if it is new record.

 function json_lookup(){
            //  TODO: manually check-value with loaded json file look up
            var manual_uin=getElementById("manualForm").value;
            const myinput;
            //  look up UIN value from loaded json fileInput
            for(var i=0; i< loaded_json_data.length; i++){
                if(loaded_json_data[i].uinNum==manual_uin){
                    document.getElementById("userInfo").innerHTML = "<u>User Info: </u>"; 
                    document.getElementById("userInfo").innerHTML += "<br>Name: " + json[i].studentInfo["firstName"]  + " " + json[i].studentInfo["middleName"] + " " + json[i].studentInfo["lastName"];
                    document.getElementById("userInfo").innerHTML += "<br>UIN: " + json[i].uin;
                    document.getElementById("userInfo").innerHTML += "<br>RSVP: " + json[i].studentInfo["rsvpStatus"];
                    break; //Match is found, stop search
                    // no update, return message
                } else{
                    // append manual uin to json and make field on it
                    var data=JSON.parse(manual_uin)
                    data.studentInfo.push(
                        updated_uin="uin",
                        checkin_status="YES",
                        Rsvp="NO"
                    );
                    manual_uin=JSON.stringify(data);
                }
            }
        }
        console.log(json_lookup);

seems I can't overwrite json file directly, so people pointed me out that download json file first and do search and overwrite them. Here is how I can download json file but not good looking:

  function download_json(JSONstring){
        document.getElementById('myButton').onclick = function(event){
            var json = JSONstring;
            blob = new Blob([json], {type: "octet/stream"});
            url = window.URL.createObjectURL(blob);
            this.href = url;
            this.target = '_blank';
            this.download_json = 'newCopy.json';
        }
  }

even I download converted json file to local drive and trigger my function to overwrite json file, it doens't give me any. how can I make this work? Any idea to get this done? Any thoughts? Thanks

desired output:

Here is my tentative output that I want to get;

[{
    "uin": "123456789",
    "studentInfo": {
         "firstName": "Jonathan",
         "middleName": "Samson",
         "lastName": "Rowe",
         "rsvpStatus": "Yes"
    }  },  {
    "uin": "123456788",
    "studentInfo": {
         "firstName": "phil",
         "middleName": "Aspilla",
         "lastName": "beltran",
         "rsvpStatus": "No"
    }
// newly added record
 {
    "uin": "146491712",
    "studentInfo": {
         "firstName": "NA",
         "middleName": "NA",
         "lastName": "NA",
         "rsvpStatus": "No"
    }  }]

Do you want to a) allow user to download json that is updated in the browser or b) update the json file residing somewhere on the server? — Kocik, Mar 11 '19 at 19:51
@Kocik I want to update `json` file residing somewhere on the server. Could you give me a possible idea or sketch solution to get this done? Thank you — beyond_inifinity, Mar 11 '19 at 20:20
From what I understand, the code in the question is all running in the browser, right? To update a file on the server you will need to make an ajax call to some script on that server that will handle your request. You should be able to do this easily with javascript using nodejs server for example: https://expressjs.com/ — Kocik, Mar 11 '19 at 20:28
@Kocik would it be possible to extend your solution by giving a simple working example that I could understand and to learn your solution? Thanks very much — beyond_inifinity, Mar 13 '19 at 17:34

score 2 · Answer 1 · answered Mar 12 '19 at 09:54

From the browser you don't have access to the file system, so it is impossible to update any files. You need to:

have a server with a script that will handle updating the file,
you need to call that server

To set up the server, you could user expressjs.

To call the server, you can do either:

For Ajax call, assuming you target modern browsers, you can use fetch. It's actually pretty simple

var url = 'http://yourserver.com';
var data = {your: 'data'};

var request = {
    method: 'POST', 
    body: JSON.stringify(data)
};

fetch(url, request).then(function() {
    // Handle response we get from the API
})

I understand your point, could you provide a simple working example to demonstrate your solution as efficient, I would like to accept your updated solution, thanks! — beyond_inifinity, Mar 13 '19 at 17:33

any workaround to overwrite/download json file by searching values in it?

1 Answers1