使用输入字段的值更新JSON对象

Question

我创建了一个表来显示和更新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对象。

Answer 1

您需要的功能是一种数据绑定，并且有很多现有的库可以执行此操作。它们允许你声明html表单域和js变量之间的连接，并动态地同步它们的值。

rivets.js似乎是一个很好的选择，你可能会发现更多类似的东西搜索js数据绑定。

Answer 2

UPDATE

我注意到你不只是要得到相应的JSON值，而是要设置的值。我认为这会更好。 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> 

---

你可以做这样的事情。我假设你的输入名称对应于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 
    } 
}