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

Posted 2023-05-09

【中文标题】从 json 动态创建的 Javascript 表单输入，需要将对象映射到另一个对象的正确字段并保存

【英文标题】：Javascript form inputs created dynamically from json and need to map object to proper field from another object and save

【发布时间】：2012-12-14 17:24:44

【问题描述】：

我将尽我所能解释我在这里尝试做的事情。它有点复杂（至少对我来说） 我目前有一个对象，我循环遍历并动态填充带有输入的 html 表单。此代码将对象值放在输入中，并允许我将它们编辑/保存回对象。 然而，我需要做的实际上是将对象字段映射到另一个对象中定义的一组字段。原因是原始对象有时会丢失数据，我想从我的表单中添加它。 例如：我的对象有一个属性“按钮”。并且该对象具有 k，v，例如宽度、高度和位置。但是在我的另一个定义“按钮”可用字段的对象中，它具有宽度、高度、位置、颜色和过渡。我想要做的是，当我单击“按钮”标签（请参阅我的演示）时，它会向我显示“控件”对象中的所有字段，并填写包含值的其他对象中的所有值。然后，我可以将值添加到为空的输入中，并将它们保存回我的对象​​。 这是我的演示（点击标签查看表单输入）：http://jsfiddle.net/bGxFC/6/

这是我的代码：

    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;
                    );
                
            );
        );
    );
);

我该如何解决这个问题？

【问题讨论】：

可以用$.extend合并2个对象...不清楚哪个需要master

@charlietfl 主要对象是“objStr”，“控件”对象仅用于定义可用的表单输入。一切都保存到“objStr”。

那么您能具体说明一下将两者结合起来吗？不完全清楚这里需要发生什么。

@charlietfl 当然...我将使用一个特定的用例。首先请到我的演示jsfiddle.net/bGxFC/6 并点击标签“按钮”。您将看到“BackgroundImage”、“Position”、“Width”和“Height”的一些输入。我目前可以更改这些值，点击保存并将它们保存到对象中。现在看看我的 JS 中的第一个“var 控件”（在顶部）。可以看到“Button”不仅有上面提到的4个字段，而且还有“Transition”。需要发生的是，当我单击 html 上的“按钮”标签时，它将显示 ..cont

中列出的所有字段

'controls' 对象并使用匹配的值填充输入。在这种情况下，“BackgroundImage”、“Position”、“Width”和“Height”......而“Transition”将为空白。当我在“转换”输入中输入内容并点击保存时，它将存储在其他值所在的同一对象中。

【参考方案1】：

您需要 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>

JS

$('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();
   )  

)

如果您可以摆脱所有字符串解析器并在演示中使用适当的 javascript 对象，并添加这些 html 修改，我将很乐意从那里帮助调试

【讨论】：

我不确定这是否适合我，因为在生产中我有几十个元素（即按钮、标签、图像等），这就是我动态生成表单的原因。如果我错了，请纠正我，但使用 tis 我必须为每个元素创建一个 html 表单

不...您可以从对象动态创建 html。当您像现在一样创建 html 时，只需添加我给您的概念。您必须能够将 html 字段匹配回对象

对不起，我无法理解。你可以在我的演示中展示给我看吗？

no....这开始变成管理整个应用程序。在您现在拥有的 html 解析代码中...添加我显示的额外 html 属性。在浏览器控制台中检查您当前的 html....我从那里复制它以添加新的 data- 属性

我尝试以几种不同的方式添加它们，但我无法弄清楚它适合我的代码的位置。如果我能在我的代码示例中看到一个字段是如何从controls 创建并使用objStr 填充的，那么我绝对可以在那里采用它。我只是无法用表单动态映射这两个对象并保存回objStr