«Ходить» по JSON-ответу и заполнять поля формы - более эффективный подход?

Question

Я знаю, что есть гораздо более элегантный / эффективный способ сделать это (в php я бы использовал foreach), но с помощью jQuery как я могу пройти пары var / val ответа JSON и заполнить поля формы с теми же идентификаторами, что и имена полей в ответе JSON?

Вот мой ответ JSON:

[{"field":"svendor_name","value":"Vendor Name Inc."},{"field":"svendor_addr1","value":"1234 Vendor Lane."},{"field":"svendor_addr2","value":"Suite 100"},{"field":"svendor_city"
,"value":"Vendorville"},{"field":"svendor_state","value":"CA"},{"field":"svendor_zip","value":"90210"},{"field"
:"svendor_phone","value":"800-555-1234"}]

Вот мой код jQuery для заполнения формы:

$(document).ready(function()
{
    $('#svendor_name').bind("change", function()
    {
        var svendor = $("#svendor_name").val();
        svendor = svendor.replace(/&/g, '*');
        $.getJSON("get_vendors.php?sname=" + svendor,
        function(data)
        {
            $.each(data,
                function(i, item)
                {
                    if(item.field == "svendor_name")
                    {
                        $("#svendor_name").val(item.value);
                    }
                    else if(item.field == "svendor_addr1")
                    {
                        $("#svendor_addr1").val(item.value);
                    }
                    else if(item.field == "svendor_addr2")
                    {
                        $("#svendor_addr2").val(item.value);
                    }
                    else if(item.field == "svendor_city")
                    {
                        $("#svendor_city").val(item.value);
                    }
                    else if(item.field == "svendor_state")
                    {
                        $("#svendor_state").val(item.value);
                    }
                    else if(item.field == "svendor_zip")
                    {
                        $("#svendor_zip").val(item.value);
                    }
                    else if(item.field == "svendor_phone")
                    {
                        $("#svendor_phone").val(item.value);
                    }
                    else if(item.field == "svendor_id")
                    {
                        $("#svendor_id").val(item.value);
                    }
            });
        });
    });
});

Это все работает хорошо и хорошо, но я действительно хочу избежать всех операторов if / else и просто использовать данные, возвращаемые из метода getJSON, чтобы определить, какие поля заполняются какими значениями. Какой подход к этому чище / эффективнее?

- Николай

Answer 1

Вы можете избавиться от всех операторов if, заменив свой $ .each следующим:

$.each(data, function(i, item){
  $("#"+item.field).val(item.value);
});

Answer 2

Что с этим не так?

$.each(data,
    function(i, item) {
        $("#" + item.field).val(item.value);
    }
});

Answer 3

Если ваши результаты выглядят так:

[{"field1":"value1","field2":"value2"}]

Тогда код, предоставленный Себом и Четаном, работает

$.each(data, function(i, item){
  $("#"+item.field).val(item.value);
});

Если ваши результаты выглядят так:

{"field1":"value1","field2":"value2"}

Тогда используйте этот код

$.each(data, function(field, value){
  $("#"+field).val(value);
});

Answer 4

Я заметил, что идентификаторы элементов такие же, как поля в вашем JSON, как насчет:

$(document).ready(function() {
    $('#svendor_name').bind("change", function()
    {
        var svendor = $("#svendor_name").val();
        svendor = svendor.replace(/&/g, '*');
        $.getJSON("get_vendors.php?sname=" + svendor,
        function(data) {
                $.each(data, function(i, item) {
                    $('#' + item.field).val(item.value);
                });
        });
    });
});