使用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數據填充輸入字段

回答

相關問題