如何使用带有表单字段名称和表单字段值的jSON字符串来填充表单字段jQUERY

Question

我有以下jSON字符串：

[{"meta_key":"algemeen_reden","meta_value":"oplevering"},{"meta_key":"algemeen_netspanning","meta_value":"230"}]

现在我使用以下脚本填充表单字段：

// Call Algemeen Data
get_algemeen_data = function (checklist_id)
{
    $.getJSON(MAP_URL+'onderhoud/handle/fetch_data.php?cat=get_algemeen_e&checklist_id='+ checklist_id, function(data) 
    {
        $.each(data, function(key, value)
        {
            $.each(value, function(vars, values)
            {
                console.log(vars + " = " + values);
                if(vars == "noodverlichting" && values == "1")
                {
                    $('#collapseNoodverlichting').collapse({show: true});
                    $('.togglerNoodverlichting span:first').removeClass("badge-success").addClass("badge-danger");
                    $('.togglerNoodverlichting span').eq(1).removeClass("oi-plus").addClass("oi-minus");
                    $('#noodverlichting').val("1");
                }

                $('input[type="text"][name="' + vars + '"]').val(values);
                $('textarea[name="' + vars + '"]').val(values);
                $('select[name="' + vars + '"]').val(values);
                $('input[type="checkbox"][name="' + vars + '"]:checked').prop( "checked", false );
                $('input[type="checkbox"][name="' + vars + '"][value="' + values + '"]').prop( "checked", true );
            })
        });
    })
    // using the fail promise callback
    .fail(function( jqxhr, textStatus, error ) {
        var err = textStatus + ", " + error;
        console.log( "Request Failed: " + err );
    });
}
get_algemeen_data(checklist_id);
// End Call Algemeen Data

问题是，我收到以下回复：

meta_key = algemeen_reden
meta_value = oplevering
meta_key = algemeen_netspanning
meta_value = 230

我希望回复是：

algemeen_reden = oplevering
algemeen_netspanning = 230

我知道我的代码可以更短更漂亮，但这不是现在的问题

Answer 1

你不需要第二个循环，使用点符号来读取对象：

$.each(data, function(key, value)
{
  console.log(value.meta_key+' = '+value.meta_value);
}

Answer 2

如果你想要将一个键/值对的json压缩成一个关联数组，它可以按如下方式工作：

json = '[{"meta_key":"algemeen_reden","meta_value":"oplevering"},{"meta_key":"algemeen_netspanning","meta_value":"230"}]';
data = JSON.parse(json);
values=[];
for (i in data) values[data[i].meta_key]=data[i].meta_value;

现在values []包含：

algemeen_netspanning:"230"
algemeen_reden:"oplevering"

Answer 3

非常感谢你！

我有以下解决方案：

// Call Algemeen Data
get_algemeen_data = function (checklist_id)
{
    $.getJSON(MAP_URL+'onderhoud/handle/fetch_data.php?cat=get_algemeen_e&checklist_id='+ checklist_id, function(data) 
    {
        $.each(data, function(key, value)
        {
            console.log(data[key].meta_key + " = " + data[key].meta_value);
                if(data[key].meta_key == "noodverlichting" && data[key].meta_value == "1")
                {
                    $('#collapseNoodverlichting').collapse({show: true});
                    $('.togglerNoodverlichting span:first').removeClass("badge-success").addClass("badge-danger");
                    $('.togglerNoodverlichting span').eq(1).removeClass("oi-plus").addClass("oi-minus");
                    $('#noodverlichting').val("1");
                }

                $('input[type="text"][name="' + data[key].meta_key + '"]').val(data[key].meta_value);
                $('textarea[name="' + data[key].meta_key + '"]').val(data[key].meta_value);
                $('select[name="' + data[key].meta_key + '"]').val(data[key].meta_value);
                $('input[type="checkbox"][name="' + data[key].meta_key + '"]:checked').prop( "checked", false );
                $('input[type="checkbox"][name="' + data[key].meta_key + '"][value="' + data[key].meta_value + '"]').prop( "checked", true );
        });
    })
    // using the fail promise callback
    .fail(function( jqxhr, textStatus, error ) {
        var err = textStatus + ", " + error;
        console.log( "Request Failed: " + err );
    });
}
get_algemeen_data(checklist_id);
// End Call Algemeen Data