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

How to repopulate form with multidimensional JSON data?

本文关键字：填充 表单 新填充 何使用 JSON 数据      更新时间：2023-09-26

我正试图找到一种方法，用多种选项类型、选择、单选、文本区域和复选框填充表单。我在这里发现了一些像jQuery这样的脚本来填充插件或建议使用jQuery和JSON来填充表单？以及更多的堆栈帖子，但它们都不能正确处理多维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'"}]"
    }
};

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

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

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

感谢您的帮助。

不幸的是，代码会一团糟，但以下是您需要做的。

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

    function jsonloop(looper){ //pass in object/array to loop through
    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名称迭代
  • 转换为数组（可能有用，也可能不有用）
  • 查找json数组（也适用于对象，只需替换为对象）

祝你好运。很抱歉，我无法建造更多。

相关文章：