javascript - 关于改写json，并保存

Question

一段json数据展示在页面上，如何双击input框修改value值并保存下来

{
  "OpcUaClientConfig": {
    "endpointUrl": "opc.tcp://127.0.0.1:26545",
    "userName": "user1",
    "password": "password1",
    "securityMode": "NONE",
    "securityPolicy": "None",
    "timeout": 6000
  },
  "RedisConfig": {
    "Host": "127.0.0.1",
    "Port": 6379,
    "Password": "AUlSBQqy"
  },
  "MqttConfig": {
    "Protocol": "mqtt",
    "Host": "120.76.194.101",
    "Port": 1883,
    "UserName": "admin",
    "Password": "admin1702"
  },
  "Equiment": [
    {
      "Device": "Device1",
      "Group": "NC01",
      "DeviceID": "1",
      "Count": 0,
      "DeviceCode": "000100001000001",
      "Tags": [
        {
          "TagName": "progf",
          "Address": "ns=1;s=progf1",
          "ClientAccess": "RO",
          "ScanRate": "1000",
          "DataType": "",
          "Value": "",
          "Status": "",
          "Timestamp": ""
        },
        {
          "TagName": "ms",
          "Address": "ns=1;s=ms1",
          "ClientAccess": "RO",
          "ScanRate": "1000",
          "DataType": "",
          "Value": "",
          "Status": "",
          "Timestamp": ""
        }
      ]
    },
    {
      "Device": "Device1",
      "Group": "NC09",
      "DeviceID": "3",
      "Count": 0,
      "DeviceCode": "000100001000003",
      "Tags": [
        {
          "TagName": "progf",
          "Address": "ns=1;s=progf2",
          "ClientAccess": "RO",
          "ScanRate": "1000",
          "DataType": "",
          "Value": "",
          "Status": "",
          "Timestamp": ""
        },
        {
          "TagName": "ms",
          "Address": "ns=1;s=ms2",
          "ClientAccess": "RO",
          "ScanRate": "1000",
          "DataType": "",
          "Value": "",
          "Status": "",
          "Timestamp": ""
        }
      ]
    }
  ]
}

Answer 1

思路大概是先把.json字符串通过.json()转成js对象..然后把value的值与对应input绑定, 如果用mvvm的框架的话会简单很多, 纯js也可以写一个双向绑定. 又或者使用现成的json编辑库, 这个推荐一个jsoneditorhttps://github.com/josdejong/jsoneditor/