How to fill form with JSON?

Came here searching for a solution that didn't involve jQuery or a brunch of DOM scaning, but didn't find one... so here is my vanilla js solution brought to you other guys that probably ditched jQuery long ago.

const data = { 
  "id" : 12,
  "name": "Jack",
  "description": "Description",
  "nonExisting": "works too"
}

const { elements } = document.querySelector('form')

for (const [ key, value ] of Object.entries(data) ) {
  const field = elements.namedItem(key)
  field && (field.value = value)
}

<form>
  <input type="text" name="id"/>
  <input type="text" name="name"/>
  <input type="text" name="description"/>
</form>

I haven't seen a solution that accounts for a form with nested properties. Here it is.

//pass in the parent object name, if there is one
let parentName = 'optional';
SyncJsonToForm(data, parentName);

function SyncJsonToForm(obj, path = '') {
     let subpath = path === '' ? path : path + '.';
     $.each(obj, function (key, value) {
          let jsonPath = subpath + key;

          // to debug a particular field (or multiple fields), replace the following JsonPath(s) with the desired property(ies)
          if ([''].includes(jsonPath)) {
               console.log(jsonPath);
               debugger;
          }

          // update the value for the jsonPath
          $(`[name="${jsonPath}"]`).val(value);

          if (typeof value === "object") {
               SyncJsonToForm(value, jsonPath);
          }
     });
}

I'm using this method with iCheck elements. This method can work native check and radio inputs.

populateForm(frm, data) {
    console.log(data);

    $.each(data, function(key, value) {
        var ctrl = $("[name=" + key + "]", frm);
        switch (ctrl.prop("type")) {
            case "radio":
                if (
                    ctrl.parent().hasClass("icheck-primary") ||
                    ctrl.parent().hasClass("icheck-danger") ||
                    ctrl.parent().hasClass("icheck-success")
                ) {
                    // raido kutularında aynı isimden birden fazla denetçi olduğu için bunları döngüyle almak lazım
                    // multiple radio boxes has same name and has different id. for this we must look to each html element
                    $.each(ctrl, function(ctrlKey, radioElem) {
                        radioElem = $(radioElem);
                        console.log(radioElem);
                        console.log(radioElem.attr("value"));

                        if (radioElem.attr("value") == value) {
                            radioElem.iCheck("check");
                        } else {
                            radioElem.iCheck("uncheck");
                        }
                    });
                } else {
                    $.each(ctrl, function(ctrlKey, radioElem) {
                        radioElem = $(radioElem);
                        console.log(radioElem);
                        console.log(radioElem.attr("value"));

                        if (radioElem.attr("value") == value) {
                            radioElem.attr("checked", value);
                        } else {
                            radioElem.attr("checked", value);
                        }
                    });
                }
                break;

            case "checkbox":
                if (
                    ctrl.parent().hasClass("icheck-primary") ||
                    ctrl.parent().hasClass("icheck-danger") ||
                    ctrl.parent().hasClass("icheck-success")
                ) {
                    if (ctrl.attr("value") == value) {
                        ctrl.iCheck("check");
                    } else {
                        ctrl.iCheck("uncheck");
                    }
                } else {
                    ctrl.removeAttr("checked");
                    ctrl.each(function() {
                        if (value === null) value = "";
                        if ($(this).attr("value") == value) {
                            $(this).attr("checked", value);
                        }
                    });
                }
                break;
            default:
                ctrl.val(value);
        }
    });
}

Example form:

<form id="form1">
    <div className="form-group row">
        <label className="col-sm-3 col-form-label">
            {window.app.translate(
                "iCheck Radio Example 1"
            )}
        </label>
        <div className="col-sm-9">
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio1_0"
                    name="radio1"
                    value="0"
                />
                <label for="radio1_0">
                    {window.app.translate(
                        "Radio 1 0"
                    )}
                </label>
            </div>
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio1_1"
                    name="radio1"
                    value="1"
                />
                <label for="radio1_1">
                    {window.app.translate(
                        "Radio 1 1"
                    )}
                </label>
            </div>
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio1_2"
                    name="radio1"
                    value="2"
                />
                <label for="radio1_2">
                    {window.app.translate(
                        "Radio 1 2"
                    )}
                </label>
            </div>
        </div>
    </div>

    <div className="form-group row">
        <label className="col-sm-3 col-form-label">
            {window.app.translate(
                "iCheck Radio Example 2"
            )}
        </label>
        <div className="col-sm-9">
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio2_0"
                    name="radio2"
                    value="0"
                />
                <label for="radio2_0">
                    {window.app.translate(
                        "Radio 2 0"
                    )}
                </label>
            </div>
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio2_1"
                    name="radio2"
                    value="1"
                />
                <label for="radio2_1">
                    {window.app.translate(
                        "Radio 2 1"
                    )}
                </label>
            </div>
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio2_2"
                    name="radio2"
                    value="2"
                />
                <label for="radio2_2">
                    {window.app.translate(
                        "Radio 2 2"
                    )}
                </label>
            </div>
        </div>
    </div>


    <div className="form-group row">
        <label
            htmlFor="ssl"
            className="col-sm-3 col-form-label"
        >
            {window.app.translate("SSL")}
        </label>
        <div className="col-sm-9">
            <div className="form-group row">
                <div className="col-sm-12">
                    <div className="icheck-primary d-inline">
                        <input
                            type="checkbox"
                            id="ssl"
                            name="ssl"
                            value="1"
                        />
                        <label for="ssl" />
                    </div>
                </div>
            </div>
        </div>
    </div>


</form>

Example json data:

{
    "radio1": "3",
    "radio2": "1",
    "ssl": "0"
}

Edit: I tried populate plugin but it doesn't working with iCheck and other things for example select2, chosen, etc...