[英]update a JSON object with input fields' values
我創建了一個表來顯示和更新JSON對象。 這是該表中的2個字段。 我已將JSON路徑放在名稱字段中。
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">
我保留了此路徑以用於更新JSON對象。 我嘗試了自己的方式來更新它。 但它需要數百個代碼。 有什么簡單的方法可以更新該JSON對象。
UPDATE
我注意到您不只是想要獲取相應的JSON值,而是想要設置該值。 我認為這會更好。 新的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>
你可以做這樣的事情。 我假設您的輸入名稱與JSON對象中的結構相對應。 的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
}
}
您需要的功能是一種數據綁定 ,並且有很多現有的庫可以執行此操作。 它們允許您聲明html表單字段和js變量之間的連接,並動態地同步它們的值。
rivets.js似乎是一個不錯的選擇,並且您可以通過搜索js數據綁定找到更多類似的東西。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.