JSON fills in a form

Source: Internet
Author: User
Tags button type

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.