使用JSON数据填充输入字段

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

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

0 Object {emailAdd: "[email protected]", emailDesc: "work"} 
1 Object {emailAdd: "[email protected]", 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); 
});

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

来源

2014-09-01 user94628

您没有任何JSON。您正在使用它的上下文意味着服务器端模板语言的输出是JavaScript对象字面量。 – Quentin 2014-09-01 12:32:14

不知道这是否导致问题，但你设置的div的ID总是只是“电子邮件”... ID的需要是唯一的... – nothing9 2014-09-01 12:37:22

@ nothing9，他追加“X”和“Z “在”电子邮件字符串“中，所以我认为这不是问题。 – kazimt9 2014-09-01 12:41:26

您在每次迭代each初始化变种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); 
});

演示小提琴：自从你开始在每个循环计数x=1http://jsfiddle.net/orooct3q/

来源

2014-09-01 12:41:08 lpg

@Ipg感谢您的光临。我将价值重新初始化为一。 – user94628 2014-09-01 12:43:02

试试这个

emails = JSON.parse('{% raw json_encode(emails) %}'); // or use $.parseJSON() 

$.each(emails, function(k,v) { 
    // code goes here 
    console.log(k,v); 
});

来源

2014-09-01 12:37:25 kazimt9

没有必要调用'JSON.parse'。 JSON可以用作Javascript文字。 – Barmar 2014-09-01 12:40:03

你的代码覆盖以前的值。以下应显示所有数据：

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

来源

2014-09-01 12:43:57 PeterKA

使用JSON数据填充输入字段

回答

相关问题