简体   繁体   中英

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. Here is a small sample of the code http://jsfiddle.net/UfPTd/ The code is also below. 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? Do I have to use the index[] array brackets? 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/

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. If you planning to move this further angular are better option for binding and building interface.

You may also read this .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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