Question

我学习了如何在JavaScript中将csv文件读取为json对象。但是，我想用新插入的记录更新json文件。基本上，我将使用表单值作为查询，并加载json文件作为目标，以找到匹配项并相应地更新json文件。为此，这是我的脚本的结构：

<!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>

然后这是我的临时函数，用于检查转换后的json文件（convertToJson的输出）中的记录。基本上，每当我单击manualcheck按钮时，都应在转换后的json文件中检查表单值，如果是新记录，则更新json。

 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);

似乎我不能直接覆盖json文件，所以人们指出我先下载json文件并进行搜索和覆盖。这是我可以下载json文件但外观不好的方法：

  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';
        }
  }

即使我将转换后的json文件下载到本地驱动器并触发我的功能来覆盖json文件，它也没有给我任何帮助。我该如何进行这项工作？有什么想法可以完成吗？有什么想法吗？谢谢

所需的输出：

这是我想得到的临时输出；

[{
    "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"
    }  }]

Answer 1

您无法从浏览器访问文件系统，因此无法更新任何文件。您需要：

有一台带有脚本的服务器，该脚本将处理文件的更新，
您需要致电该服务器

要设置服务器，可以使用expressjs。

要调用服务器，您可以执行以下任一操作：

对于Ajax调用，假设您定位到modern browsers，则可以使用访存。是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
})

通过搜索其中的值来覆盖/下载json文件的解决方法？

1 个答案: