映射JSON屬性HTML ID可以輕鬆設定值

Question

假設我有類似如下：

var address = {id: 100, name: "Gregg", addressOne: "111 1st Street"}; 

和一個HTML表單：

<input id="name" /> 
<input id="addressOne" /> 

我想知道是否有辦法遍歷表單的所有INPUT元素，並根據JSON對象的屬性設置它們的值。以下是我可以採取的長期方法：

$.each($("input"), function(idx, input) { 
    if (input.attr("id") == "name") input.val(address.name); 
    if (input.attr("id") == "addressOne") input.val(address.addressOne); 
}); 

我想知道是否有辦法做到上述沒有IF語句。 JavaScript中有一些方法可以將兩者動態映射到一起。我希望這是有道理的。

Answer 1

您可以使用val方法：

$('input').val(function(i, v){ 
    return address[this.id] 
}) 

http://jsfiddle.net/GKUMk/

Answer 2

$.each($("input"), function(idx, input) { 
    if (address[input.attr("id")]) { 
     address[input.attr("id")] 
    } 
}); 

Answer 3

$("#name").val(address.name); 
$("#addressOne").val(address.addressOne); 

Answer 4

你可以試試這個

$('input').each(function(){ 
    $(this).val(address[this.id]); 
}); 

DEMO。

Answer 5

我認爲這會工作，但我重新定義VAR地址JSON對象。

var address = {id: 100, name: "Gregg", addressOne: "111 1st Street"} 

而且迭代器可能是：

$.each($("input"), function(idx, input) { 
    $(this).val(address[input.id]); 
});​ 

我希望這有助於。

Answer 6

<input type="text" id="name" /> 
<input type="text" id="addressOne" /> 

var address = { id: 100, name: "Gregg", addressOne: "111 1st Street" }, 
prop, $field; 

for (prop in address) { 
    $("#" + prop).val(address[prop]); 
} 

請注意，地址變量現在是一個對象文本而不是數組。

小提琴：http://jsfiddle.net/kboucher/Gt9ND/