JSON fills in a form

Many frameworks support the interpretation of JSON into a grid or form, with individual preface writing one. The content used is primarily JavaScript traversal of JSON. Such as:

　　

for (Var key in JSON) {     alert ("Name:" + key + "value:" + Json[key]);   }

and specific to the Web page, there will be some space in the form, which will be specific analysis of the concrete situation, nonsense not to say, post code

varFillform =function($form, JSON) {varJsonobj =JSON; if(typeofJSON = = = ' String ') {Jsonobj=$.parsejson (JSON); }     for(varKeyinchJsonobj) {//traversing JSON strings        varObjType = Jsonobjtype (Jsonobj[key]);//Get value type         if(ObjType = = = "Array") {//if it is an array, it is generally a many-to-many relationship in the database            varObj1 =Jsonobj[key];  for(varArraykeyinchobj1) {                //alert (Arraykey + Jsonobj[arraykey]);                varArrayobj =Obj1[arraykey];  for(varSmallkeyincharrayobj)                    {setckb (key, Arrayobj[smallkey]);  Break; }            }        } Else if(ObjType = = = "Object") {//if it is an object, everything is fine, in most cases, there will be fields like XXXID as the foreign key table ID        } Else if(ObjType = = = "string") {//if it is a string            varstr =Jsonobj[key]; varDate =NewDate (str); if(Date.getday ()) {//This judgment date is I lazy, do not want to write code, we use with caution. $ ("[name=" + key + "]", $form). Val (Date.format ("Yyyy-mm-dd")); Continue; }            varTAGOBJS = $ ("[name=" + key + "]", $form); if($ (Tagobjs[0]). attr ("type") = = "Radio") {//if the radio control$.each (TAGOBJS,function(keyobj,value) {if($ (value). attr ("val") = =Jsonobj[key]) {value.checked=true;                }                }); Continue; }                        $("[name=" + key + "]", $form). Val (Jsonobj[key]); } Else{//Other Direct Assignments$ ("[name=" + key + "]", $form). Val (Jsonobj[key]); }    }}varSETCKB =function(name, value) {//Alert (name + "" + value);    //$ ("[name=" + name + "][value=" + value + "]"). attr ("Checked", "checked"); I don't know why I can't find a specific label;$ ("[name=" + name + "][val=" + value + "]"). attr ("Checked", "checked");}

View Code

Because the multi-election will have some different ways, no way, can only continue to specific situations specific analysis

varFILLCKB =function(name, JSON) {varJsonobj =JSON; if(typeofJSON = = = ' String ') {Jsonobj=$.parsejson (JSON); }    varstr =Jsonobj[name]; if(typeofstr = = = "string") {        varArray = Str.split (","); $.each (Array,function(key, value) {setckb (name, value);    }); }}

View Code

Seemingly less of a method of judging the type

 var  jsonobjtype = function   (obj) { if  (typeof  obj = = = = "Object "" {  json.stringify (obj);  if  (teststr[0] = = ' {' && teststr[teststr.length-1] = = '} ') return  "class" ;  if  (teststr[0] = = ' [' && teststr[teststr.length-1] = = '] ') return  "Array" ;  return  typeof   obj;}  

View Code

The next step is in the HTML.

<! DOCTYPE html>        $(function () {            $("#btntest"). Click (function() {$.post ("/test2/getjsonstr", {},function(data) {fillckb ("Teammate", data); Fillform ($ ("#fm1"), data);            });        });    }); </script>Saviola<input type= "checkbox" class= "Checkbox-inline" name= "Friends" val= "2" value= "2" >Batistuta<input type= "checkbox" class= "Checkbox-inline" name= "Friends" val= "3" value= "3" >Lopez<input type= "checkbox" class= "Checkbox-inline" name= "Friends" val= "4" value= "4" >Veron</div> </div> <div class= "Form-group" > <label class= "Control-lab El col-sm-2 ">Teammate</label> <div class=" col-sm-10 "> <input type=" che Ckbox "class=" Checkbox-inline "name=" Teammate "val=" 1 "value=" 1 ">Van Nistelrooy<input type= "checkbox" class= "Checkbox-inline" name= "Teammate" val= "2" value= "2" >Messi<input type= "checkbox" class= "Checkbox-inline" name= "Teammate" val= "3" value= "3" >Veron<input type= "checkbox" class= "Checkbox-inline" name= "Teammate" val= "4" value= "4" >nedved</div> </div> <div class= "Form-group" > <label class= "Control-lab El col-sm-2 ">Position</label> <div class=" col-sm-10 "> <input type=" rad Io "class=" Radio-inline "name=" Position "value=" DC "val=" DC "/> Defender <input type=" Radio "class=" Radi O-inline "Name=" Position "value=" MC "val=" MC "/> Midfield <input type=" Radio "class=" Radio-inline "name= "Position" value= "FW" val= "FW"/> Winger <input type= "Radio" class= "Radio-inline" name= "Position" Valu                E= "St" val= "St"/> Shooter </div> </div> <div class= "Text-center" > <button type= "button" class= "btn btn-info col-sm-offset-2" id= "btntest" > OK </button> &lt ;/div> </form> </div></body>View Code
JSON data included
{"id": +, "name": "Crespo", "Birthday": "2014-08-19t16:06:01.0522081+08:00", "number": 9, "Cotch": {"id": 1, "name": "Me "}," Friends ": [{" id ": 1," name ": 0},{" id ": 3," name ": 0}]," Teammate ":" 3,4 "," Position ":" St "}
The last photo of success
Summary: There is no difficulty, it is estimated that everyone can do with snacks. For the type of judgment, after writing to feel that should be based on the type of control will be better, quickly off work, go home and change it. There is the code comment in $ ("[name=" + name + "][value=" + value + "]"). attr ("Checked", "checked"); This sentence can not find a specific value, do not know what is the reason, but also hope the great God advice.