Convert HTML Form to JSON Object
Question
I want to convert a HTML Form to a JSON object. The form basically contains two sections, Header and Detail. The Header section contains some HTML Input boxes and the Detail section is a Table. A dummy view of my Form is as follows.
<!DOCTYPE html> <html lang="en"> <body> <form id="MyForm" method="POST"> <div name="HeaderData"> <label id="lblFname">First Name:</label> <input type="text" name="fname"/> <br/> <label id="lblLname">Last Name:</label> <input type="text" name="lname" /> <br/> <label id="lblEmail">Email:</label> <input type="text" name="email" /> <br/> </div> <div id="DetailData"> <table cellspacing="0" align="Center" rules="all" border="1" id="MyTable" style="width:940px;border-collapse:collapse;"> </thead> <th scope="col">Code</th> <th scope="col">Name</th> <th scope="col">Continent</th> <th scope="col">Region</th> <th scope="col">Population</th> <th scope="col">Independence Year</th> </thead> <tbody> <tr> <td name="Code">Ind</td> <td name="Country">India</td> <td name="Continent">Asia</td> <td name="Region">Asia</td> <td name="Population">113Core</td> <td name="Independence">1947</td> </tr> <tr> <td name="Code">Ind</td> <td name="Country">India</td> <td name="Continent">Asia</td> <td name="Region">Asia</td> <td name="Population">1500000</td> <td name="Independence">1947</td> </tr> </tbody> </table> </div> </body> </form> </html>
I would expect the resulting JSON object to mimic:
{"HeaderData":[{"Fname":"XYZ","LName":"ABC","Email":"ABC@XYZ.COM"}], "DetailData":[{"Code":"Ind","Name":"India","Continent":"Asia","Region":"Asia","Population":"113 Crore","Independence Year":"1947"}], "DetailData":[{"Code":"Ind","Name":"India","Continent":"Asia","Region":"Asia","Population":"113 Crore","Independence Year":"1947"}] }
I have tried different libraries like jquery.tabletojson.js but they are not able to assign arrays to separate variables.
Later I want to convert this JSON object to an XML String so that I can process it in a SQL Server QUERY. I would expect the XML String to mimic:
enter code here <Root> <HeaderData> <FName>XYZ</FName> <LName>XYZ</LName> <Email>abc@xyz.com</Email> </HeaderData> <DetailData> <Code>Ind</Code> <Name>India</Name> <Continent>Asia</Continent> <Region>Asia</Region> <Population>113Crore</Population> <IndependenceYear>1947</IndependenceYear> </DetailData> <DetailData> <Code>Ind</Code> <Name>India</Name> <Continent>Asia</Continent> <Region>Asia</Region> <Population>113Crore</Population> <IndependenceYear>1947</IndependenceYear> </DetailData> </Root>
My current priority is building the JSON STRING. I can convert the data to XML once the JSON is available.
1 answers
solution1
1 2016-06-14 19:39:30
if all your <td> 's have a name attribute you can convert it to an object with a few lines of jQuery...
var poop = [];
$("#MyTable").find("tr").each(function(){
var fart = {};
if(!$(this).find("td").length) return;
$(this).find("td").each(function(){
fart[$(this).attr("name")]=$(this).text();
});
poop.push(fart);
});
console.log(poop);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.