javascript - About rewriting json and saving it

Question

A piece of json data is displayed on the page, how to double-click the input box to modify the value and save it

{
  "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

The idea is to first convert the .json string into a js object through .json()...and then bind the value of the value to the corresponding input. It will be much simpler if you use the mvvm framework, pure js You can also write a two-way binding. Or use a ready-made json editing library. This recommends a jsoneditor https://github.com/josdejong/jsoneditor/