javascript - 有什么解决方法可以通过搜索其中的值来覆盖/下载 json 文件吗?

标签 javascript html json

我学会了如何在 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"
    }  }]

最佳答案

从浏览器中您无权访问文件系统,因此无法更新任何文件。 您需要:

  1. 拥有一个带有脚本的服务器来处理文件更新,
  2. 您需要调用该服务器

要设置服务器,您可以使用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
})

关于javascript - 有什么解决方法可以通过搜索其中的值来覆盖/下载 json 文件吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55108000/

相关文章:

javascript - 使用不同的键合并 2 个 JSON 数组

javascript - 选择不正确的值 HTML <select>

javascript - 在基于原型(prototype)继承的语言中使用类

javascript - CSS:使子div宽度自动适应其中的内容,而不是完整的父宽度

html - CSS 单元格没有跨越整个表格宽度的空格

javascript - Bootstrap 4 导航栏不会在大屏幕上折叠

javascript - javascript 递增字符串数字

javascript - 如何使用带有按键的 JavaScript 使 div 出现

json - Jasper Report - 将 json IO 流传递给子报表

javascript - 如何使用ajax函数获取数组的值?