使用jQuery更新外部JSON文件中的值

时间:2019-07-08 12:18:46

标签: javascript jquery html json

我有一个外部JSON文件,我需要通过ID更新一些值, 我只使用HTML和Jquery

1-外部JSON文件

[
  {"Id":1,"startTime":7.665519,"endTime":15.701717},
  {"Id":2,"startTime":18.9402,"endTime":23.036628},
  {"Id":3,"startTime":27.398977,"endTime":33.404313},
  {"Id":4,"startTime":37.254842,"endTime":41.127843},
  {"Id":5,"startTime":44.534945,"endTime":50.064397},
  {"Id":6,"startTime":44.534945,"endTime":50.064397},
  {"Id":7,"startTime":44.534945,"endTime":50.064397}
]

 $("#btnUpdateJson").click(function(){
    var Id = $("#txtId").val();
    var startTime = $("#txtStartTime").val();
    var endTime = $("#txtEndTime").val();
    $.getJSON( "../Admin/Data/fileName.json", function( data ) {
       $.each(data, function(i, item){
          if (data[i].Id == Id){
             // What can i do to update
            // StartTime and EndTime ?
           // where Id in jsone file = Id from html
          }
       });
    });
});

3 个答案:

答案 0 :(得分:0)

如果用户通过<input type="file">选择了文件,则可以使用File API读取和处理该文件。

设计不允许读取或写入任意文件。这违反了沙箱。

换句话说,您不能只是尝试通过html访问文件,还可以看到随之而来的安全隐患。因此,除非您从具有该数据的api /服务器中提取数据,否则您将不得不添加输入选项,然后用户将选择该文件,然后您的函数便可以针对该文件运行。

这是节点中的解决方案

const fs = require('fs');

var update_entry = (id, st, et, fn) => {
    var old_instance = JSON.parse(fs.readFileSync(`${fn}`, 'utf-8')); // Read the json file in
    let found = old_instance.find(record => { return record.Id == id }); // Find the object by Id
    st != null ? found.startTime = st : ''; // If not null, set value
    et != null ? found.endTime = et : ''; // If not null, set value
    let new_instance = old_instance.filter(record => { return record.Id != id }); // Copy original array besides found record
    new_instance.push(found);return new_instance; // Add found record to new array and return
}

var updated = update_entry(2, 5.9999, null, 'data.json');
console.log(updated);

输出

[ { Id: 1, startTime: 7.665519, endTime: 15.701717 },
  { Id: 3, startTime: 27.398977, endTime: 33.404313 },
  { Id: 4, startTime: 37.254842, endTime: 41.127843 },
  { Id: 5, startTime: 44.534945, endTime: 50.064397 },
  { Id: 6, startTime: 44.534945, endTime: 50.064397 },
  { Id: 7, startTime: 44.534945, endTime: 50.064397 },
  { Id: 2, startTime: 5.9999, endTime: 23.036628 } ]

答案 1 :(得分:0)

// server side example

const express=require('express');
const app = express();
const fs = require('fs');
const bodyParser=require('body-parser');

app.use(bodyParser.json());

app.put('your/end/point, (req, res)=>{
  let id = req.body.id;
  let startTime = req.body.startTime;
  let endTime = req.body.endTime;
  
   if(!id || !startTime || !endTime) 
   return res.status(400).send({ error:'id, startTime and endTime are required!' });
      
  
  fs.readFile(__dirname + '../Admin/Data/fileName.json,'utf-8',
          (err, data)=>{
          if(err) return res.send({error:err});

          let myTimesList = JSON.parse(data);
          let idFound = false;
          for (let i = 0; i < myTimesList.length; i++) {
              if (id == myTimesList[i].id){
                  let newTime ={id,
                                startTime,
                                endTime
                               }

                  myTimesList.splice(i, 1, newTime);
                  idFoud = true;
                  break;
              }
          }

          if(!idFound) {
              return res.send({ error:'invalid id!' });
          }

          fs.writeFile(__dirname +'../Admin/Data/fileName.json,'utf-8' ,
          JSON.stringify(myTimesList), 'utf-8',
              (err)=>{
                  if (err) return res.send({error:err});            

                  return res.send({message:'Your file has been updated'});
          });
      });

});

我认为要更新json文件的内容,您应该具有运行NodeJS之类的后端并使用文件系统“ fs”:-

第一步:读取文件并解析。

第二步:检查您要更改的确切位置。

第3步:您已经需要为文件添加新内容

第四步:现在,您的新数据已准备好再次写入文件。

希望这会对您有所帮助。

答案 2 :(得分:0)

您的数据进入项目,现在您可以在外部文件中获取ID

if (item.Id == Id)