简体   繁体   English

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

[英]Parse a json object and bind the data to form fields

I have a large json object I am parsing and there are many fields in the form I am binding to. 我正在解析一个大的json对象,并且我绑定到的表单中有很多字段。 Here is a small sample of the code http://jsfiddle.net/UfPTd/ The code is also below. 这是代码http://jsfiddle.net/UfPTd/的一小部分示例。该代码也在下面。 The real question is what is the best way to achieve these results? 真正的问题是实现这些结果的最佳方法是什么? Is this where Angular should be considered or javascript json.parse just fine? 这是应该考虑Angular的地方还是javascript json.parse很好? Do I have to use the index[] array brackets? 我是否必须使用index []数组括号? Trying not to use a plugin template. 尝试不使用插件模板。

<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);

Working example is here http://jsfiddle.net/UfPTd/ 工作示例在此处http://jsfiddle.net/UfPTd/

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

If you gonna stop on just binding these values you may use json.parse. 如果要停止仅绑定这些值,则可以使用json.parse。 If you planning to move this further angular are better option for binding and building interface. 如果您打算将角度进一步移动,则是绑定和构建界面的更好选择。

You may also read this . 您也可以阅读此内容

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM