Javascript-基于一个对象动态填充表单并填充另一个对象的值

我有一个JSON对象，用作所有可用字段的模板，这些字段可以添加到用于存储值的对象中的元素中

我有另一个保存值的对象。存储所有值的这个对象的k，v不是在我的应用程序中生成的。它交给了我，我需要以一种基于JSON动态创建的形式填充该值，JSON定义了给定元素的所有可用键。最好让你看看我的演示应用。
演示：
1.单击“Button_2”标签-注意它是如何用5 k，v输入填充表单的
2.现在单击“Button_1”标签-注意它是如何具有6K，v输入的
3.这两个都是“类型”：“按钮”但“按钮2”缺少其输入的“转换”
4这就是我的“

var controls

”对象的作用。它定义了每种类型可以拥有的所有可用选项。

问题
我需要修改我的代码以使用来自“

objStr

”的值，并将它们放入由“controls”创建的表单中。一旦我向空输入（即“按钮2”中的“转换”输入）添加值，它将被保存回“objStr”。

这是我的密码：

     var controls = {
    "Button":{"Type": "", "Transition": "","BackgroundImage": "","Position": "","Width": "","Height": ""},

    "Image":{"Type": "","BackgroundImage": "","Position": "","Width": "","Height": ""},

    "Label":{"Type": "","Position": "","Width": "","Height": "","Text": "","FontSize":"","Color": "", "FontType": ""}
};


objStr = {
        "View_1":
        {
            "Image_1":{
                "Type":"Image",
                "BackgroundImage":"Image.gif",
                "Position":[0,0],
                "Width":320,
                "Height":480
            },
            "Button_1":{
                "Type":"Button",
                "BackgroundImage":"Button.gif",
                "Transition":"View2",
                "Position":[49,80],
                "Width":216,
                "Height":71
            },
            "Button_2":{
                "Type":"Button",
                "BackgroundImage":"Button2.gif",
                "Position":[65,217],
                "Width":188,
                "Height":134},
            "Label_1":{
                "Type":"Label",
                "Position":[106,91],
                "Width":96,
                "Height":34,
                "Text":"Button",
                "FontSize":32,
                "Color":[0.12549,0.298039,0.364706,1]
            }
        }
    };

$(document).ready(function () {
    var $objectList = $('<div id="main" />').appendTo($('#main'));
    $.each(objStr.View_1, function(k, v) {
        $('<div/>').append(k).appendTo($objectList).on('click', function(){
            var $wrapper = $('#form .wrapper').empty();
            if(typeof v === 'string') {
                $('<div class="item" />').append('<span class="key">' + k + '</span>' + '<input value="' + v + '"/>').appendTo($wrapper);
            }
            else {//object
                $('<h3 class="formHeading" />').append(k).appendTo($wrapper);
                $.each(v, function(key, val) {
                    $('<div class="item" />').append('<span class="key">' + key + '</span>' + '<input value="' + val + '"/>').appendTo($wrapper);
                });
            }
            $("<button>Save</button>").appendTo($wrapper).on('click', function() {
                if(typeof v === 'string') {
                    v = $(this).closest(".wrapper").find("input").val();
                }
                else {//object
                    $(this).closest(".wrapper").find(".item").each(function(i, div) {
                        var $div = $(div),
                            key = $div.find(".key").text(),
                            val = $div.find("input").val();
                        v[key] = val;
                    });
                }
            });
        });
    });
});

var控件={
按钮：{“类型”：“过渡”：“背景图像”：“位置”：“宽度”：“高度”：“}，
“图像：{”类型：“，”背景图像：“，”位置：“，”宽度：“，”高度：“}，
标签：{“类型”：“位置”：“宽度”：“高度”：“文本”：“字体大小”：“颜色”：“字体类型”：“}”
};
objStr={
“视图1”：
{
“图像_1”：{
“类型”：“图像”，
“背景图像”：“Image.gif”，
“位置”：[0,0]，
“宽度”：320，
“高度”：480
},
“按钮1”：{
“类型”：“按钮”，
“背景图像”：“Button.gif”，
“转换”：“视图2”，
“位置”：[49,80]，
“宽度”：216，
“高度”：71
},
“按钮2”：{
“类型”：“按钮”，
“背景图像”：“Button2.gif”，
“职位”：[65217]，
“宽度”：188，
“高度”：134}，
“标签1”：{
“类型”：“标签”，
“位置”：[106,91]，
“宽度”：96，
“高度”：34，
“文本”：“按钮”，
“字体大小”：32，
“颜色”：[0.12549,0.298039,0.364706,1]
}
}
};
$（文档）.ready（函数（）{
var$objectList=$（''）.appendTo（$（'#main'）；
$.each（objStr.View_1，函数（k，v）{
$（“”）.append（k）.appendTo（$objectList）.on（'click'，function（））{
var$wrapper=$（'#form.wrapper'）.empty（）；
if（typeof v=='string'）{
$（''）.append（''+k+''）.appendTo（$wrapper）；
}
else{//object
$（''）.append（k）.appendTo（$wrapper）；
$。每个（v，功能（键，val）{
$（“”）.append（“”+key+“”+“”）.appendTo（$wrapper）；
});
}
$（“保存”）.appendTo（$wrapper）.on（'click'，function（）{
if（typeof v=='string'）{
v=$（this）.closest（.wrapper”）.find（“input”）.val（）；
}
else{//object
$（this）.closed（.wrapper”）.find（.item”）.each（函数（i，div）{
变量$div=$（div），
key=$div.find（“.key”）.text（），
val=$div.find（“输入”）.val（）；
v[key]=val；
});
}
});
});
});
});