How to repopulate form with multidimensional JSON data?

Question

I am trying to find a way to populate form with multitiude of option types, selects , radios, texareas, checkboxes. I found few scripts like jQuery populate plugin or suggestions here Using jQuery and JSON to populate forms? and many more stack posts but none of them handle the multidimensional JSON data properly. This is the small sample of JSON data I am dealing with ,

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\"}]"
    }

};

and as you can see the form can have text , json, booleans, and so on as values.

Form input names are prefixed like this fw_options[link_color] or fw_options[main_contained][picked]

If I could ad least find a way to properly loop trough this json to rebuild the input names in the right way I might get a way with just checking the input type and setting its value.

Any help is appreciated.

David Archibald · Answer 1 · 2019-07-26T01:11:10.430

Unfortunately, the code will be a mess, buts here's what you need to do.

Figure out how to loop for all of them, unfortunately I can only suggest that somewhere you call itself with a child such the below code using mock variables:

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

Use instanceof to check the type:

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
        }
    }
}

This is all mock code!

Do not use as it is, it will not end well. Note: The end result will likely be semi-massive due to stuff like, "json": [{}] where is both an object and an array, and you're code will bomb. Here are some good resources:

JSON name iteration
Convert to array (may or may not be useful).
Find if json array (also works with object, just replace with Object).

Good luck. I'm sorry, I couldn't build more.

How to repopulate form with multidimensional JSON data?

1 Answers1