将 JSON 属性绑定到表单

Question

我有一个 JSON 对象和一个 <form>。如果 JSON 对象具有名称与表单名称匹配的属性<input>，我希望输入显示该属性的值。有没有使用 JQuery 的简单方法？

var json = {foo: 'foo', bar: 'bar};
def form = $('#myform');

// something magical that assigns JSON property values to form inputs with matching names

有问题的表格看起来像：

<form id = "#myform" action="/foo/bar/">
  <input name="foo"/>
  <input name="bar"/>
</form>

Answer 1

您可以运行一个循环来搜索元素并输入值：

$.each(json, function(key, value) {
    form.find("input[name='" + key + "']").val(value);
});

对于形式：

<form id="myform">
    <input type="text" name="foo" />
    <input type="text" name="other" />
</form> 

使用 .field 代替输入是使用 textarea 并选择

Answer 2

你的意思是这样的：

var json = {foo: 'foo', bar: 'bar}; 
def form = $('#myform');

for(var prop in json){
    $("#myform input[name="+prop+"]")[0].value = json[prop];
}

Answer 3

试试这个：

var json = {foo: 'foo1', bar: 'bar1'};

for(var key in json) {
    if($('#myform input[name="'+key+'"]').length > 0){
        $('#myform input[name="'+key+'"]').attr('value',json[key]);
    }
}

我想这就是你想要的 ;)

在此处查看示例：http://jsfiddle.net/expertCode/FgwHe/

Answer 4

你可以使用我的插件，很简单：https://github.com/devWaleed/JQuery-JSON-Form-Binding

如果您想以自己的方式填充数据，则回调是可选的。

$("#myform").jsonToForm({ 
    data: {name: "Waleed", age: 23, gender: "Male"},
    callbacks: {
        age: function(value){
            $('[name="age"]').val(value+1);
        }
    }

});

Answer 5

您要么找到所有输入并获取输入名称并检查它们是否在 json 中，例如：http://jsbin.com/ulelik/edit。

var json = {foo: 'foo', bar: 'bar',  ContactEmail: "ContactEmail", fooo2 : "trigunatmak kulkarni"};
var inputs = $('input', '#myform').each(function() {
  if (json[this.name]) 
  {
    this.value = json[this.name];
  }

});

您选择所有输入并通过它们的名称检查它们是否在 json 对象中具有属性，然后它将使用该属性值作为输入值。