Заполнение поля ввода данными 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

Вы инициализацией вар x на каждой итерации each. Вы можете попробовать это:

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); 
}); 

Демо скрипку: http://jsfiddle.net/orooct3q/

Answer 2

Попробуйте

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

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

Answer 3

Ваш код переписывает предыдущие значения, так как вы начинаете отсчет x=1 в каждом цикле. Следующие должны показать вам все данные:

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); 
});