解析json对象并将数据绑定到表单字段

Parse a json object and bind the data to form fields

本文关键字：表单 字段 数据绑定 json 对象 解析      更新时间：2023-09-26

我有一个大的json对象，我正在解析，有许多字段的形式，我绑定到。这里是代码的一个小示例http://jsfiddle.net/UfPTd/代码也在下面。真正的问题是，实现这些结果的最佳方式是什么?这是应该考虑Angular还是javascript json的地方?解析正常吗?我必须使用索引[]数组括号吗?尽量不使用插件模板。

<form>
        <label>Select Withdrawal Type</label>
            <input type="text" data-label="Withdrawal Type" >
        <label>Plan Name</label>
            <input type="text"  data-label="Plan Name" value=""/>
        <label>Select Participant </label>
            <input type="text" data-label="Participant Name" >
       <label>Address</label>
           <input  type="text" data-label="Address On File"/>


</form>
   var data = {
  "inputs": [
    {
        "DataLabel": "Withdrawal Type",
        "DataGroup": "Participant Information",
        "DataColumn": "WithdrawalType",
        "Value": "full",
        "InternalUse": "1",
        "userDefined": "1"
    },
    {
        "DataLabel": "Plan Name",
        "DataGroup": "Participant Information",
        "DataColumn": "PlanName",
        "Value": "OpenGate Open Architecture 401(k) Plan",
        "InternalUse": "0",
        "userDefined": "0"
    },
    {
        "DataLabel": "Participant Name",
        "DataGroup": "Participant Information",
        "DataColumn": "ParticipantName",
        "Value": "Yosemite Sam",
        "InternalUse": "0",
        "userDefined": "0"
    }        }
    ]
    }

    $('input[data-label="Withdrawal Type"]').attr('value',data.inputs[0].Value);
    $('input[data-label="Plan Name"]').attr('value',data.inputs[1].Value);
    $('input[data-label="Participant Name"]').attr('value',data.inputs[2].Value);

示例如下http://jsfiddle.net/UfPTd/

for(i in data.inputs){
    $('input[data-label="'+data.inputs[i].DataLabel+'"]').attr('value',data.inputs[i].Value);
}

如果你想停止绑定这些值你可以使用json.parse。如果你打算进一步移动这个角度，这是绑定和构建接口的更好选择。

相关文章：