如何使用多维JSON数据重新填充表单？

Question

我正试图找到一种方法来填充表单中的选项类型、选择、收音机、文本区域、复选框的多重性。在这里，我发现很少有像jQuery、插件或建议这样的脚本，Using jQuery and JSON to populate forms?和更多的堆栈帖子，但是它们都没有正确地处理多维JSON数据。这是我正在处理的JSON数据的一个小示例，

var jsonData = {
    "get_template": "clean",
    "site_width": "1200px",
    "layout_type": "full",
    "main_contained": {
        "picked": "contained",
        "notcontained": {
            "container_contained": "contained"
        }
    },
    "container_spacing": "25",
    "columns_spacing": "25",
    "sidebars_spacing": {
        "horizontal": "50",
        "vertical": "50"
    },
    "headers": "menuright",
    "menu_template": "menuinheader",
    "toplevel_font": {
        "font": "Open Sans|600|latin|uppercase|default",
        "size": "12",
        "letterspacing": "0",
        "css": "font-family:'Open Sans',sans-serif;font-weight:600;font-style:normal;font-size:12px;text-transform:uppercase;",
        "google_font_link": "Open Sans:600&subset=latin"
    },
    "sublevel_font": {
        "font": "Open Sans|regular|latin|none|default",
        "size": "14",
        "letterspacing": "0",
        "css": "font-family:'Open Sans',sans-serif;font-weight:normal;font-style:normal;font-size:14px;",
        "google_font_link": "Open Sans:regular&subset=latin"
    },

    "footer_switch": 1,
    "show_button": {
        "picked": "hide",
        "show": {
            "button": {
                "button_text": "Load more",
                "html": "<div class=\"btn-container grid-item-more\"><a class=\"button btn-small radius-4 btn-border-1 align-center btn-trans\" href=\"#\"><span class=\"btn-text fs-13 fw-600\">more</span></a></div>",
                "json": "{\"createButton\":\"on\",\"buttonTransition\":\"on\",\"buttonAnimation\":false}"
            }
        }
    },
    "img-smaller": {
        "max-width": "260",
        "max-height": "145"
    },
    "img-xsmall": {
        "max-width": "120",
        "max-height": "65"
    },
    "img-related": {
        "max-width": "350",
        "max-height": "350"
    },
    "custom_css": 0,
    "disable_admin_bar": false,
    "footer_section": {
        "json": "[{\"type\":\"section\",\"shortcode\":\"section_e603095\",\"width\":\"\",\"_items\":[{\"type\":\"columns\",\"shortcode\":\"columns_a9ae4ee\",\"width\":\"1_3\",\"options\":{\"widget_name\":\"Widget 1\",\"widget_in_boxstyle\":{\"padding\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}]"
    }

};

正如您所看到的，表单可以有文本、json、booleans等作为值。

表单输入名的前缀为fw_options[link_color]或fw_options[main_contained][picked]

--如果我至少能找到一种方法来正确地循环这个json，以正确的方式重建输入名称，我可能会找到一种方法，只检查输入类型并设置它的值。

任何帮助都是非常感谢的。

Answer 1

不幸的是，代码会乱七八糟，但是这里是您需要做的。

• 想清楚如何循环所有这些代码，不幸的是，我只能建议您在某个地方使用下面的代码使用模拟变量调用自己的子代码： 函数jsonloop(looper){ //传入对象/数组，循环通过if(lastchild){ //if下半部分upperchild++的最后一个子节点；//转到上半部分jsonloop(Upperchild)的下一个子节点；}}
• 使用instanceof检查类型： 如果(Json instanceof Array){ for(var item in json){ var jsonarray = jsonitem；//do整}--如果(json对象的json实例){ for(var item in json){ var jsonobject = jsonitem；//通过对象属性//do其他程序}}执行以下不同的操作：

，这都是模拟代码！

不要用它本身，它不会有好的结局。注意:由于"json": [{}]是一个对象和一个数组，最终的结果可能是半大规模的，而您的代码会爆炸。以下是一些很好的资源：

• JSON name iteration
• Convert to array (可能有用也可能没用)。
• Find if json array (也适用于对象，只需替换为Object)。

祝好运。对不起，我不能再建更多了。