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

Question

我已经创建了一个表来显示和更新一个JSON对象。这是该表中的两个字段。我已经将JSON路径放在name字段中。

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

更新

我注意到您不只是想获得相应的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
    }
}

Answer 2

您需要的函数是一种数据绑定，并且有很多现有的库可以这样做。它们允许您声明html表单字段和js变量之间的连接，并动态同步它们的值。

rivets.js似乎是一个很好的选择，您可以通过搜索js数据绑定找到更多类似的东西。