Question

我试图找到一种方法来填充多种选项类型，选择，无线电，texareas，复选框的表单。我发现很少有像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:&#039;Open Sans&#039;,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:&#039;Open Sans&#039;,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\"}]"
    }

};

并且您可以看到表单可以包含text，json，booleans等值。

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

如果我至少找不到一种方法来正确循环通过这个json以正确的方式重建输入名称，我可能只需检查输入类型并设置其值。 < / p>

感谢任何帮助。

Answer 1

不幸的是，代码会很乱，但这就是你需要做的事情。

弄清楚如何为所有这些循环，不幸的是我只能建议你用一个孩子调用自己的地方，如下面的代码使用模拟变量：

function jsonloop(looper){ //pass in object/array to loop through //code if(lastchild){ //if last child of the lower part upperchild++; //go to next child of upper part jsonloop(upperchild); } }
使用instanceof检查类型：

if(json instanceof Array){ for(var item in json){ var jsonarray = json[item]; //do stuff } } else if(json instance of Object){ for(var item in json){ var jsonobject = json[item]; //do different stuff like below for(var name in jsonobject){ //loop through object properties //do other stuff } } }

这是所有模拟代码！

不要使用它，它不会很好地结束。注意：最终结果可能是半大量的，因为像"json": [{}]这样的东西既是对象又是数组，而你的代码将会轰炸。这是一些很好的资源：

JSON name iteration
Convert to array（可能有用也可能没用）。
Find if json array（也适用于object，只需替换为Object）。

祝你好运。对不起，我无法建立更多。

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

1 个答案: