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

我有一个很大的json对象，我正在解析并且我绑定到的表单中有很多字段。这里是代码http://jsfiddle.net/UfPTd/的小样本代码也在下面。真正的问题是实现这些结果的最佳方式是什么？这是Angular应该考虑还是JavaScript json.parse就好了？我必须使用index []数组括号吗？试图不使用插件模板。解析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/

来源

2014-03-18 user2517127

[使用jQuery和JSON填充表单？]的可能的重复？（http://stackoverflow.com/questions/7298364/using-jquery-and-json-to-populate-forms） – Wilmer

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

来源

2014-03-18 21:31:45 user3430223

如果你要停止只是结合这些值，你可以使用json.parse。如果您计划将此角度进一步调整，则对于绑定和构建界面来说，这是更好的选择您也可以阅读this。

来源

2014-03-18 21:31:49

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

回答

相关问题