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

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

javascript html json

Javascript 有通过搜索json文件中的值来覆盖/下载json文件的解决方法吗？,javascript,html,json,Javascript,Html,Json,我学习了如何在javascript中将csv文件作为json对象读取。但是，我想用新插入的记录更新json文件。基本上，我将使用表单值作为查询，并加载json文件作为目标，以找到匹配项并相应地更新json文件。为此，以下是我的脚本结构： <!DOCTYPE html> <html> <body> <form id = "manualForm"> UIN:<br> <inp

我学习了如何在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文件，所以人们指出我应该先下载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"
    }  }]

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

有一个带有脚本的服务器，该脚本将处理文件更新

你需要给那个服务器打电话

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

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

对于Ajax调用，假设您是target，您可以使用fetch。它是

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

有一个带有脚本的服务器，该脚本将处理文件更新

你需要给那个服务器打电话

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

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

对于Ajax调用，假设您是target，您可以使用fetch。它是

您想a）允许用户下载在浏览器中更新的json，还是b）更新驻留在服务器某处的json文件？@Kocik我想更新驻留在服务器某处的

json

文件。你能给我一个可能的想法或草图解决方案来完成这件事吗？谢谢，据我所知，问题中的代码都在浏览器中运行，对吗？要更新服务器上的文件，您需要对该服务器上处理您的请求的脚本进行ajax调用。您应该能够使用nodejs服务器轻松地使用javascript实现这一点，例如：@Kocik是否可以通过提供一个我可以理解的简单工作示例来扩展您的解决方案并学习您的解决方案？非常感谢。您想a）允许用户下载在浏览器中更新的json，还是b）更新驻留在服务器某处的json文件？@Kocik我想更新驻留在服务器某处的

json

文件。你能给我一个可能的想法或草图解决方案来完成这件事吗？谢谢，据我所知，问题中的代码都在浏览器中运行，对吗？要更新服务器上的文件，您需要对该服务器上处理您的请求的脚本进行ajax调用。您应该能够使用nodejs服务器轻松地使用javascript实现这一点，例如：@Kocik是否可以通过提供一个我可以理解的简单工作示例来扩展您的解决方案并学习您的解决方案？非常感谢我理解你的观点，你能提供一个简单的工作示例来证明你的解决方案是有效的吗？我愿意接受你更新的解决方案，谢谢！我理解您的观点，您能否提供一个简单的工作示例来证明您的解决方案是有效的，我愿意接受您更新的解决方案，谢谢！

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

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