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": ""
}
]
}
]
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The idea is to first convert the
.json stringinto ajs objectthrough.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/