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

时间:2017-12-20 07:25:46

标签: javascript jquery json ajax

我有以下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

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

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

如果你想要将一个键/值对的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;

现在,值[]包含:

algemeen_netspanning:"230"
algemeen_reden:"oplevering"

答案 2 :(得分:0)

非常感谢你!

我有以下解释:

// 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