一段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": ""
}
]
}
]
}
#
思路大概是先把
.json字串
透過.json()
轉成js物件
..然後把value的值與對應input綁定, 如果用mvvm的框架的話會簡單很多, 純js也可以寫一個雙向綁定. 又或者使用現成的json編輯庫, 這個推薦一個jsoneditorhttps://github.com/josdejong/jsoneditor/