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

Question

我正在尝试找到一种方法来使用多种选项类型、选择、单选、texareas、复选框来填充表单。我在Using jQuery and JSON to populate forms? 和更多堆栈帖子中发现了一些像 jQuery 填充插件或建议这样的脚本，但它们都没有正确处理多维 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 、 booleans 等作为值。

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

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

感谢任何帮助。

Answer 1

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

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

  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 name iteration
• Convert to array（可能有用也可能没用）。
• Find if json array（也适用于对象，只需替换为对象）。

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