Javascript表单输入是从json动态创建的，需要将对象映射到另一个对象的适当字段并保存

我会尽我所能解释我在这里要做什么。这有点复杂（至少对我来说）

我目前有一个对象，我循环使用它并用输入动态填充html表单。此代码将对象值放置在输入中，并允许我编辑/将其保存回对象。

但是，我需要做的是将对象字段映射到另一个对象中定义的一组字段。原因是原始对象有时缺少数据，我想从表单中添加它。

例如：我的对象有一个属性“Button”。物体有k，v表示宽度，高度和位置。但在我的另一个对象中，它定义了“按钮”的可用字段，包括宽度、高度、位置、颜色和过渡。我试图做的是，当我点击“按钮”标签（见我的演示）时，它会显示我的“控件”对象中的所有字段，并填充包含这些值的其他对象中的所有值。然后，我可以将值添加到空的输入中，并将它们保存回我的对象。

这是我的演示（单击标签查看表单输入）：

这是我的密码：

    var controls = {
    "Controls": [{
        "Button":[{"Transition": "","BackgroundImage": "","Position": "","Width": "","Height": ""}],

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

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


var str = 'View\n{\n    Image\n    {\n        BackgroundImage: Image.gif;\n        Position: 0, 0;\n        Width: 320;\n        Height: 480;\n    }\n\n    Button\n    {\n        BackgroundImage: Button.gif;\n        Transition: View2;\n        Position: 49, 80;\n        Width: 216;\n        Height: 71;\n    }\n\n    Button\n    {\n        BackgroundImage: Button2.gif;\n        Position: 65, 217;\n        Width: 188;\n        Height: 134;\n    }\n\n    Label\n    {\n        Position: 106, 91;\n        Width: 96;\n        Height: 34;\n        Text: "Button";\n        FontSize: 32;\n        Color: 0.12549, 0.298039, 0.364706, 1;\n    }\n    \n\n}';

str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object
str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object
str = str.replace(/;/g, ","); // swap out semicolons with commas
str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas
str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays
str = str.replace(/"/g, ""); // get rid of all double quotes
str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings
$("#parseList").html(str);

var objStr;
eval("objStr={" + str + "};");
//End Parse String

$(document).ready(function () {
    var $objectList = $('<div id="main" />').appendTo($('#main'));
    $.each(objStr.View, 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控件={
“控制措施”：[{
“按钮”：[{“过渡”：”“背景图像”：”“位置”：”“宽度”：”“高度”：“}]，
“图像”：[{“BackgroundImage”：“位置”：“宽度”：“高度”：“类型”：“}]，
标签“：[{”位置“：”宽度“：”高度“：”文本“：”字体大小“：”颜色“：”字体类型“：”}]
}]
};
var str='View\n{\n Image\n{\n BackgroundImage:Image.gif；\n位置：0,0；\n宽度：320；\n高度：480；\n}\n\n按钮\n{\n BackgroundImage:Button.gif；\n转换：View2；\n位置：49,80；\n宽度：216；\n高度：71；\n}\n按钮\n{\n BackgroundImage:Button2.gif；\n位置：65217；\n宽度：188；\n高度：134；\n}\n标签\n{\n位置：106,91；\n宽度：96；\n高度：34；\n文本：“按钮”\n字体大小：32；\n颜色：0.12549,0.298039,0.364706,1；\n}\n\n\n\n\n}；
str=str.replace（/（\w+）\s*\{/g，“$1:{”）；//在每个命名对象后添加冒号
str=str.replace（//\}（\s*\w）/g，“}，$1”）；//在每个新命名对象之前添加逗号
str=str.replace（/；/g，“，”）；//用逗号替换分号
str=str.replace（/，（\s+\}）/g，“$1”）；//去掉后面的逗号
str=str.replace（/（[\d\.]+（，[\d\.]+））/g，“[$1]”；//创建数字数组
str=str.replace（/“/g，”）；//去掉所有双引号
str=str.replace（/：\s+（[^\[\d\{][^，]+）/g'，：“$1”）；//创建字符串
$（“#解析列表”）.html（str）；
var-objStr；
eval（“objStr={“+str+”}；”；
//结束解析字符串
$（文档）.ready（函数（）{
var$objectList=$（''）.appendTo（$（'#main'）；
$.each（objStr.View，function（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；
});
}
});
});
});
});

---

如何解决这个问题？

您需要html中的输入元素包含它们关联的对象键

比如：

<div class="wrapper">
<h3 class="formHeading" data-item="Button_2">Button_2</h3>

<div class="item"><span class="key">Type</span><input value="Button" data-property="Type"></div>
<div class="item"><span class="key">BackgroundImage</span><input value="Button2.gif"  data-property="BackgroundImage"></div>
<div class="item"><span class="key">Position</span><input value="65,217"></div><button class="save">Save</button>

</div>

---

如果你能摆脱所有的字符串解析器，在演示中使用一个合适的javascript对象，并添加这些html修改，我很乐意帮助你从那里进行调试

可以将两个对象与

$合并。extend

…不清楚需要修改哪一个master@charlietfl主要对象是“objStr”，“controls”对象仅用于定义可用性可编辑表单输入。所有内容都保存到“objStr”。那么，您能否具体说明如何组合这2个？还不完全清楚这里需要做什么。@charlietfl当然……我将使用一个特定的用例。首先，请转到我的演示并单击标签“按钮”。您将看到“背景图像”、“位置”、“宽度”的一些输入，和“高度”。我当前可以更改这些值，点击save，然后将它们保存到对象中。现在看看我的JS中的第一个“var控件”（在顶部）。你可以看到“Button”不仅有上面提到的4个字段，还有“Transition”。需要做的是当我单击“Button”时在我的html标签上，它将显示..cont'controls'对象中列出的所有字段，并用匹配的值填充输入。在这种情况下，“BackgroundImage”、“Position”、“Width”和“Height”…而“Transition”将为空。当我在“Transition”中键入内容时输入并点击保存，它将存储在其他值所在的同一个对象中。我不确定这是否适用于我，因为在生产中我有几十个元素（即按钮、标签、图像等）这就是我动态生成表单的原因。如果我错了，请纠正我，但使用tis，我必须为每个元素创建一个html表单否…您可以从对象动态创建html。当

$('button.save').click(function(){
    var $form=$(this).closest( '.wrapper'), itemName=$form.find('.formHeading').data('item')
   var objectItem= storedObject[ itemName ];

   $('.item').each(function(){
        var $input=$(this).find(':input');
        objectItem[ $input.data('property')]= $input.val();
   })  

})