Question

我有一个带有128和140两种类型的Json文件。我想通过javascript生成一个表单。我想生成输入框，如果类型是128而且生成选择框，如果类型是137，并且想要动态生成它。我想重复一个div作为交换类型128，我希望生成的形式是这样的：

 <form method="post" action="/roundtrip_final.bc" id="finalinvoice">
   <div class="passenger_box"><div class="tblreserve adultInfoes">

   <div class="c-infoo">
    <label for="name" class="abs-tlt"> name</label>
    <input placeholder="firstname " id="name" name="_root.passengerinfo__1.passengerinfo.fullname.firstname" class="nofilling2 engword" type="text">
   </div>

   <div class="c-infoo">
    <label for="family" class="abs-tlt">lastname</label>
    <input placeholder=" lastname" id="family" name="_root.passengerinfo__1.passengerinfo.fullname.lastname" class="nofilling2 engword" type="text">
   </div>

   <div class="c-infoo">
    <label class="abs-tlt" for="gender"></label>
    <select name="_root.passengerinfo__1.passengerinfo.gender">
     <option value="1" selected="">male</option>
     <option value="0">famale</option>
    </select>
   </div>  

  <div class="clr"></div></div><div class="clr"></div></div>
  </form>

这是我的Javascript代码：

 var schema =  [{
    "queestion":"name" ,
    "type":"128",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"nofilling2 engword"
        }},
        {"attr":{
            "name":"id",
            "value":"name"
        }},
        {"attr":{
            "name":"type",
            "value":"text"
        }},
        {"attr":{
            "name":"placeholder",
            "value":"name"
        }},
        {"attr":{
            "name":"name",
            "value":"_root.passengerinfo__1.passengerinfo.fullname.firstname"
        }}
    ]

},
{
    "queestion":"lastname" ,
    "type":"128",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"nofilling2 engword"
        }},
        {"attr":{
            "name":"id",
            "value":"family"
        }},
        {"attr":{
            "name":"type",
            "value":"text"
        }},
        {"attr":{
            "name":"placeholder",
            "value":"lastname"
        }},
        {"attr":{
            "name":"name",
            "value":"_root.passengerinfo__1.passengerinfo.fullname.lastname"
        }}
    ]

},
{
    "queestion":"birthdate" ,
    "type":"128",
    "attrs":[
        {"attr":{
            "name":"class",
            "value":"datepicker finalforminut nofilling2 pwt-datepicker-input-element"
        }},
        {"attr":{
            "name":"id",
            "value":""
        }},
        {"attr":{
            "name":"placeholder",
            "value":"birthdate"
        }},
        {"attr":{
            "name":"type",
            "value":"text"
        }},
        {"attr":{
            "name":"name",
            "value":"_root.passengerinfo__1.passengerinfo.birthdate"
        }}
    ]

}]

for (var i = 0; i < schema.length; i++) {
    var type=schema[i].type;
    if(type==128){
    for (var y=0;y<schema[i].type.length;y++){ 
            var string = "<div class="c-infoo"><label for="family" class="abs-tlt"> "; 
            string += schema[i].queestion;
        string+="</label>";
        var y=document.getElementsByClassName('adultInfoes'); 
        y.innerHTML=string + " : ";
        var string1 = "<_input "; 
        for (var x=0;x<schema[i].attrs.length;x++){ 
            string1 += schema[i].attrs[x].attr.name+'="'+schema[i].attrs[x].attr.value+'" ' 
        } 
        string1+=">"; 
        console.log(string) 
        var y=document.getElementsByClassName('adultInfoes'); 
        y.innerHTML=string1;    
    } 
    }
}

Answer 1

问题有点不清楚，可能含糊不清，并且没有样本json用于创建select菜单项（137）或div（140？）所以我即兴创作！我希望以下内容可能有用 - 它可能不是那么完美，但应该给出一个良好的起点

<!doctype html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Dynamic form generation</title>
    </head>
    <body>
        <div id='parent'></div>
        <script>

            var parent = document.getElementById('parent');

            function createNode( t, a, p ) {
                try{
                    var el = ( typeof( t )=='undefined' || t==null ) ? document.createElement( 'div' ) : document.createElement( t );
                    for( var x in a ) if( a.hasOwnProperty( x ) && x!=='innerHTML' ) el.setAttribute( x, a[ x ] );
                    if( a.hasOwnProperty('innerHTML') ) el.innerHTML=a.innerHTML;
                    if( p!=null ) typeof( p )=='object' ? p.appendChild( el ) : document.getElementById( p ).appendChild( el );
                    return el;
                }catch(err){
                    console.warn('createNode: %s, %o, %o',t,a,p);
                }
            }

            var types={
                128:'text',
                137:'select'
            }

            var schema =  [{
                "question":"name" ,
                "type":"128",
                "attrs":[
                    {"attr":{
                        "name":"class",
                        "value":"nofilling2 engword"
                    }},
                    {"attr":{
                        "name":"id",
                        "value":"name"
                    }},
                    {"attr":{
                        "name":"type",
                        "value":"text"
                    }},
                    {"attr":{
                        "name":"placeholder",
                        "value":"name"
                    }},
                    {"attr":{
                        "name":"name",
                        "value":"_root.passengerinfo__1.passengerinfo.fullname.firstname"
                    }}
                ]

            },
            {
                "question":"lastname" ,
                "type":"128",
                "attrs":[
                    {"attr":{
                        "name":"class",
                        "value":"nofilling2 engword"
                    }},
                    {"attr":{
                        "name":"id",
                        "value":"family"
                    }},
                    {"attr":{
                        "name":"type",
                        "value":"text"
                    }},
                    {"attr":{
                        "name":"placeholder",
                        "value":"lastname"
                    }},
                    {"attr":{
                        "name":"name",
                        "value":"_root.passengerinfo__1.passengerinfo.fullname.lastname"
                    }}
                ]

            },
            {
                "question":"birthdate" ,
                "type":"128",
                "attrs":[
                    {"attr":{
                        "name":"class",
                        "value":"datepicker finalforminut nofilling2 pwt-datepicker-input-element"
                    }},
                    {"attr":{
                        "name":"id",
                        "value":""
                    }},
                    {"attr":{
                        "name":"placeholder",
                        "value":"birthdate"
                    }},
                    {"attr":{
                        "name":"type",
                        "value":"text"
                    }},
                    {"attr":{
                        "name":"name",
                        "value":"_root.passengerinfo__1.passengerinfo.birthdate"
                    }}
                ]

            },
            {
                "question":"gender" ,
                "type":"137",
                "attrs":[
                    {"attr":{
                        "name":"class",
                        "value":"datepicker finalforminut nofilling2 pwt-datepicker-input-element"
                    }},
                    {"attr":{
                        "name":"id",
                        "value":"gender"
                    }},
                    {"attr":{
                        "name":"placeholder",
                        "value":"gender"
                    }},
                    {"attr":{
                        "name":"name",
                        "value":"_root.passengerinfo__1.passengerinfo.birthdate"
                    }}
                ],
                "options":[
                    {"value":0,"text":"Female"},
                    {"value":1,"text":"Male"},
                    {"value":2,"text":"Transgender"},
                    {"value":3,"text":"Hermaphrodite"}
                ]

            }];

            schema.forEach(
                function( obj ){

                    var label_attribs={};
                    var node_attribs={};

                    obj.attrs.forEach(function(a){
                        label_attribs[ a.attr.name ]=a.attr.value;
                        node_attribs[ a.attr.name ]=a.attr.value;
                    });
                    label_attribs['innerHTML']=obj.question;


                    var type=types[ obj.type ];
                    if( obj.type==128 || obj.type==140 ){
                        node_attribs.type=type;
                        type='input';
                    }
                    console.info(type)

                    var label=createNode('label', label_attribs, parent );
                    var node=createNode( type , node_attribs, label );

                    if( obj.type==137 ){
                        var options=obj.options;
                        options.forEach(function(option){
                            createNode('option',{ value:option.value, innerHTML:option.text }, node );
                        });
                    }
                }
            );
        </script>
    </body>
</html>

哪个输出以下HTML结构

<div id="parent">
    <label class="nofilling2 engword" id="name" type="text" placeholder="name" name="_root.passengerinfo__1.passengerinfo.fullname.firstname">
        name
        <input class="nofilling2 engword" id="name" type="text" placeholder="name" name="_root.passengerinfo__1.passengerinfo.fullname.firstname">
    </label>
    <label class="nofilling2 engword" id="family" type="text" placeholder="lastname" name="_root.passengerinfo__1.passengerinfo.fullname.lastname">
        lastname
        <input class="nofilling2 engword" id="family" type="text" placeholder="lastname" name="_root.passengerinfo__1.passengerinfo.fullname.lastname">
    </label>
    <label class="datepicker finalforminut nofilling2 pwt-datepicker-input-element" id="" placeholder="birthdate" type="text" name="_root.passengerinfo__1.passengerinfo.birthdate">
        birthdate
        <input class="datepicker finalforminut nofilling2 pwt-datepicker-input-element" id="" placeholder="birthdate" type="text" name="_root.passengerinfo__1.passengerinfo.birthdate">
    </label>
    <label class="datepicker finalforminut nofilling2 pwt-datepicker-input-element" id="gender" placeholder="gender" name="_root.passengerinfo__1.passengerinfo.birthdate">
        gender
        <select class="datepicker finalforminut nofilling2 pwt-datepicker-input-element" id="gender" placeholder="gender" name="_root.passengerinfo__1.passengerinfo.birthdate">
            <option value="0">Female</option>
            <option value="1">Male</option>
            <option value="2">Transgender</option>
            <option value="3">Hermaphrodite</option>
        </select>
    </label>
</div>

您应该能够应用更多类似的逻辑来获得所需的输出格式

如何使用Json

1 个答案: