javascript - 使用 JSON 数据填充输入字段

Question

我从我的服务器收到了一个 JSON 对象，我希望它遍历所有返回值并填充两个动态创建的输入文本字段。

目前我返回了 2 条记录，但它只填充了一组字段，而另一组虽然已创建但仍未填充。 console.log 输出显示有两条记录:

0 Object {emailAdd: "bob@work.com", emailDesc: "work"} 
1 Object {emailAdd: "john@home.com", emailDesc: "home"}

这是 Jquery:

var emails = {% raw json_encode(emails) %};
$.each(emails, function(k,v) {
    x = 1;
    z = x++;
    $('<input type="email" placeholder="Email" value="" id="email'+x+'" data-name="emailAdd" /><input type="text" placeholder="Description" value="" id="email'+z+'" data-name="emailDesc"/>').appendTo('#email');
    $('#email' + x + '').val(v.emailAdd);
    $('#email' + z + '').val(v.emailDesc);
    x++;
    console.log(k, v); 
});

似乎只是返回最后一条记录，而不是所有记录。如何显示所有返回的记录？

Answer 1

您在每个 each 迭代中初始化 var x。你可以试试这个:

var emails = {% raw json_encode(emails) %};
x=1;
$.each(emails, function(k,v) {
z=x++;
$('<div class="form-group1" name ="email" id="email"><input type="email" class="form-control" placeholder="Email" value="" id="email'+x+'" data-name="emailAdd" /><br><input type="text" class="form-control" placeholder="Description" value="" id="email'+z+'" data-name="emailDesc"/></div>').appendTo('#email');
$('#email'+x+'').val(v.emailAdd);
$('#email'+z+'').val(v.emailDesc);
x++;
console.log(k,v); 
});

演示 fiddle :http://jsfiddle.net/orooct3q/