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/