How to fill form with JSON?

Question

I get ajax response as JSON and need to fill a form with it. How to do that in jQuery or something else ? Is something better than using $(json).each() ?

<

Answer 1

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:

    

        
            {window.app.translate(
                "iCheck Radio Example 1"
            )}
        
        

            

                
                
                    {window.app.translate(
                        "Radio 1 0"
                    )}
                
            
            

                
                
                    {window.app.translate(
                        "Radio 1 1"
                    )}
                
            
            

                
                
                    {window.app.translate(
                        "Radio 1 2"
                    )}
                
            
        
    

    

        
            {window.app.translate(
                "iCheck Radio Example 2"
            )}
        
        

            

                
                
                    {window.app.translate(
                        "Radio 2 0"
                    )}
                
            
            

                
                
                    {window.app.translate(
                        "Radio 2 1"
                    )}
                
            
            

                
                
                    {window.app.translate(
                        "Radio 2 2"
                    )}
                
            
        
    


    

        
            {window.app.translate("SSL")}
        
        

            

                

                    

                        
                        
                    
                
            
        
    

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