I have created a table to show and update a JSON object. this are 2 fields in that tables. I have put the JSON path in the name field.
var obj = {
"subscription": {
"control-data": [
"app",
"sp"
],
"callback-url": "http://core.mbv:18080/man-notify",
"post-notification": true
},
"charging-schedulers": [
{
"charging-scheduler-name": "fifteen-days",
}
]
}
<input type="text" name="subscription%$#^control-data%$#^0" class="inputArea" value="app" size="3">
<input type="text" name="subscription%$#^callback-url" class="inputArea" value="http://core.mbv:18080/man-notify" size="36">
I have kept this path to use in updating the JSON object. I have tried my own way to update it. but it takes hundreds of codes. are there any easy way to update that JSON object.
UPDATE
I noticed you didn't just want to get the corresponding JSON value but instead wanted to set the value. I think this will work better. new jsFiddle
obj = {
"subscription": {
"control-data": [
"app",
"sp"],
"callback-url": "http://core.mbv:18080/man-notify",
"post-notification": true
},
"charging-schedulers": [{
"charging-scheduler-name": "fifteen-days",
}]
}
function updateJSON() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var q = inputs[i].name.split("%$#^");
setValue(obj, q, inputs[i].value);
}
// This is the updated JSON obj
console.log(obj);
}
function setValue(obj, q, val) {
var sel = q.shift();
if (typeof obj[sel] === "object" && q.length > 0) {
setValue(obj[sel], q, val);
} else {
obj[sel] = val;
}
}
HTML
<input type="text" name="subscription%$#^control-data%$#^0" class="inputArea" value="app" size="3">
<input type="text" name="subscription%$#^callback-url" class="inputArea" value="http://core.mbv:18080/man-notify" size="36">
<button id="update" onclick="updateJSON()">Update</button>
You could do something like this. I am assuming your input names correspond to the structure in the JSON object. jsFiddle
var obj = {
"subscription": {
"control-data": [
"app",
"sp"],
"callback-url": "http://core.mbv:18080/man-notify",
"post-notification": true
},
"charging-schedulers": [{
"charging-scheduler-name": "fifteen-days",
}]
}
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var q= inputs[i].name.split("%$#^");
var value = getValue(obj, q);
// This is where you have the value for an input
console.log("value:", value);
}
function getValue(obj, q) {
var res = obj[q.shift()];
if (typeof res === "object" && q.length > 0) {
return getValue(res, q)
} else {
return res
}
}
the function you need is a kind of data binding , and there's a lot of existing libraries to do this. they allow you to declare connections between html form fields and js variables, and synchronize their value dynamically.
rivets.js seems to be a good option for you, and you may find more similar things by searching js data binding .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.